2. 程式人生 > >CheckBoxList與SELECT 新增刪除 ，置頂，上移，下移，置底

CheckBoxList與SELECT 新增刪除 ，置頂，上移，下移，置底

阿新 • • 發佈：2019-01-16

 <script src="../lib/jquery-1.2.6.pack.js"type="text/javascript"></script>

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
            $(":checkbox[name = 'CheckBoxList4'] ").click(
            function()
            {
                if (this.checked)
                {
                   // alert($(this).attr("value")+$(this).attr("title"));
                    if($("input[@name='CheckBoxList4'][@checked]").length > 3)
                    {
                        $(this).attr("checked",false);//
                        alert("最多隻能選擇3個！");
                    }
                    else
                    {
                        addOption(document.getElementById("ddl26"),$(this).attr("title"),$(this).attr("value"));   
                    }
                }
                else
                {
                    removeItem(document.getElementById("ddl26"),$(this).attr("value"));
                }
            }
        )
    
//         $("div.div_question").mouseover(function(){
//             $(this).removeClass().addClass("div_question_mouseover");
//            }).mouseout(function(){
//             $(this).removeClass().addClass("div_question_mouseout");  
//            }); 
    });

 function addOption(obj,stext,svalue)
    {
        var isExt = false;
        for(var i=1; i < obj.length; i++)    
　　　　{//最上面的一個不需要移動，所以直接從i=1開始    
　　　　　　if(obj.options[i].value == svalue)    
　　　　　　{    
　　　　　　　 isExt = true;
　　　　　　　 break;
　　　　　　}    
　　　　}
　　　　if(!isExt)
　　　　{
　　　　  var opt = new Option(stext,svalue); 
          obj.options.add(opt);     
        }
    }
    function removeItem(obj,value)
    {
        for(var i=0; i < obj.length; i++)    
　　　　{//最上面的一個不需要移動，所以直接從i=1開始    
　　　　　　if(obj.options[i].value == value)    
　　　　　　{    
　　　　　　　 obj.remove(i);
　　　　　　　 break;
　　　　　　}    
　　　　}
    }
    //上移    
　  function moveUp(obj)    
　　{　    
　　　　　　for(var i=1; i < obj.length; i++)    
　　　　　　{//最上面的一個不需要移動，所以直接從i=1開始    
　　　　　　　　if(obj.options[i].selected)    
　　　　　　　　{    
　　　　　　　　　　if(!obj.options.item(i-1).selected)    
　　　　　　　　　　{    
　　　　　　　　　　　　var selText = obj.options[i].text;    
　　　　　　　　　　　　var selValue = obj.options[i].value;    
                        obj.options[i].text = obj.options[i-1].text;    
                        obj.options[i].value = obj.options[i-1].value;    
                        obj.options[i].selected = false;    
                        obj.options[i-1].text = selText;    
                        obj.options[i-1].value = selValue;    
                        obj.options[i-1].selected=true;    
　　　　　　　　　　}    
　　　　　　　　}    
　　　　　　}    
　　　　}    
    
        //下移    
        function moveDown(obj)    
　　　　{    
　　　　　　for(var i = obj.length -2 ; i >= 0; i--)    
　　　　　　{//向下移動，最後一個不需要處理，所以直接從倒數第二個開始    
　　　　　　　　if(obj.options[i].selected)    
　　　　　　　　{    
　　　　　　　　　　if(!obj.options[i+1].selected)    
　　　　　　　　　　{    
　　　　　　　　　　　　var selText = obj.options[i].text;    
　　　　　　　　　　　　var selValue = obj.options[i].value;    
                        obj.options[i].text = obj.options[i+1].text;    
                        obj.options[i].value = obj.options[i+1].value;    
                        obj.options[i].selected = false;    
                        obj.options[i+1].text = selText;    
                        obj.options[i+1].value = selValue;    
                        obj.options[i+1].selected=true;    
　　　　　　　　　　}    
　　　　　　　　}    
　　　　　　}    
　　　　}    
        //移動    
        function moveOption(obj1, obj2)    
        {    
             for(var i = obj1.options.length - 1 ; i >= 0 ; i--)    
             {    
                 if(obj1.options[i].selected)    
                 {    
                    var opt = new Option(obj1.options[i].text,obj1.options[i].value);    
                    opt.selected = true;    
                    obj2.options.add(opt);    
                    obj1.remove(i);    
                }    
             }    
        }    
        //置頂    
      function  moveTop(obj)     
      {     
            var  opts = [];     
            for(var i =obj.options.length -1 ; i >= 0; i--)    
            {    
                if(obj.options[i].selected)    
                {    
                    opts.push(obj.options[i]);    
                    obj.remove(i);    
                }    
            }    
            var index = 0 ;    
            for(var t = opts.length-1 ; t>=0 ; t--)    
            {    
                var opt = new Option(opts[t].text,opts[t].value);    
                opt.selected = true;    
                obj.options.add(opt, index++);    
            }    
        }     
      //置底    
      function  moveBottom(obj)     
      {     
            var  opts = [];     
            for(var i =obj.options.length -1 ; i >= 0; i--)    
            {    
                if(obj.options[i].selected)    
                {    
                    opts.push(obj.options[i]);    
                    obj.remove(i);    
                }    
            }    
             for(var t = opts.length-1 ; t>=0 ; t--)    
            {    
                var opt = new Option(opts[t].text,opts[t].value);    
                opt.selected = true;    
                obj.options.add(opt);    
            }    
        }     

  <table>
                        <tr>
                        <td  > <%--<asp:CheckBoxList ID="CheckBoxList4" runat="server" Width="297px" >
                                        <asp:ListItem Value="A">廠家商品描述</asp:ListItem>
                                        <asp:ListItem Value="B">消費者對商品的評論</asp:ListItem>
                                        <asp:ListItem Value="C">面料</asp:ListItem>
                                        <asp:ListItem Value="D">品牌（是您喜歡的服裝品牌）</asp:ListItem>
                                        <asp:ListItem Value="E">做工</asp:ListItem>
                                        <asp:ListItem Value="F">價格便宜</asp:ListItem>
                                        <asp:ListItem Value="G">商品的展示方式</asp:ListItem>
                                        <asp:ListItem Value="H">客服人員的推薦和介紹</asp:ListItem>
                                        <asp:ListItem Value="I">有成套搭配可以選擇</asp:ListItem>
                                        <asp:ListItem Value="J">款式和顏色</asp:ListItem>
                                        <asp:ListItem Value="K">商品已經銷售的數量</asp:ListItem>
                                    </asp:CheckBoxList>--%>
                                    <ul>
                                        <li><input id="Checkbox1" type="checkbox" name="CheckBoxList4" value="A" title="廠家商品描述"/>廠家商品描述</li>
                                        <li><input id="Checkbox2" type="checkbox" name="CheckBoxList4" value="B" title="消費者對商品的評論"/>消費者對商品的評論</li>
                                        <li><input id="Checkbox3" type="checkbox" name="CheckBoxList4" value="C" title="面料"/>面料</li>
                                        <li><input id="Checkbox4" type="checkbox" name="CheckBoxList4" value="D" title="品牌（是您喜歡的服裝品牌）"/>品牌（是您喜歡的服裝品牌）</li>
                                        <li><input id="Checkbox5" type="checkbox" name="CheckBoxList4" value="E" title="做工"/>做工</li>
                                        <li><input id="Checkbox6" type="checkbox" name="CheckBoxList4" value="F" title="價格便宜"/>價格便宜</li>
                                        <li><input id="Checkbox7" type="checkbox" name="CheckBoxList4" value="G" title="商品的展示方式"/>商品的展示方式</li>
                                        <li><input id="Checkbox8" type="checkbox" name="CheckBoxList4" value="H" title="客服人員的推薦和介紹"/>客服人員的推薦和介紹</li>
                                        <li><input id="Checkbox9" type="checkbox" name="CheckBoxList4" value="I" title="有成套搭配可以選擇"/>有成套搭配可以選擇</li>
                                        <li><input id="Checkbox10" type="checkbox" name="CheckBoxList4" value="J" title="款式和顏色"/>款式和顏色</li>
                                        <li><input id="Checkbox11" type="checkbox" name="CheckBoxList4" value="K" title="商品已經銷售的數量"/>商品已經銷售的數量</li>                                       
                                    </ul><br />
                                    </td>
                        <td valign="top">  <TABLE style="FLOAT: left">
  <TBODY>
  <TR>
    <TD verticalalign="center">
      <div style="MARGIN-LEFT: 10px"><select id="ddl26" name="ddl26"  style="OVERFLOW: auto; WIDTH: 200px; HEIGHT: 200px" size="15" multiple></select></ddl26></DIV></TD>
    <TD verticalalign="center">
      <DIV class=qButton>
      <UL>
        <LI><img src="Resources/images/gotop1.gif" alt="" /> <a   onclick="moveTop(document.getElementById('ddl26'));"  style="cursor:pointer"
        name=first>移至最前</A></LI>
        <LI><img src="Resources/images/upmove.gif" alt="" /> <a   onclick="moveUp(document.getElementById('ddl26'));"  name = "up" style="cursor:pointer">上移一位</a>
        </LI>
        <LI style="MARGIN-TOP: 10px"><img src="Resources/images/downmove.gif" alt=""/> <a  onclick="moveDown(document.getElementById('ddl26'));" style="cursor:pointer">下移一位</a></LI>
        <LI><img src="Resources/images/gobottom1.gif" /> <a onclick="moveBottom(document.getElementById('ddl26'));" style="cursor:pointer" name="last">移至最後</a></LI></UL></DIV></TD></TR></TBODY></TABLE></td>
                        </tr>
                        </table>

效果圖

相關推薦

CheckBoxList與SELECT 新增刪除 ，置頂，上移，下移，置底

 <script src="../lib/jquery-1.2.6.pack.js"type="text/javascript"></script> <script type="text/javascript" language="javasc

[置頂] RecyclerView實現瀑布流，圖片自適應高度

話不多說，先上效果圖 對於RecyclerView，相信大家都不陌生了，這個集listView，GridView，瀑布流效果與一身強大控制元件，漸漸地滲透在每個App.... 還是回到正題，如何讓RecyclerView裡的圖片自適應高度？ 我們知道，要讓RecyclerView有瀑布流效果，R

[置頂] jQuery傳送ajax請求，一次點選重複提交

問題描述： 前臺頁面 <input type="button" class="inputbutton" id="btnlogin" value="登入" /> show.js: $("#btnlogin").click(function(){ $.aj

js上移、下移、置頂、置底功能

實現頁面上列表內容上移、下移、置頂、置底 功能，主要實現思路是節點操作，比如說：上移，直接把點選項移動到前一個節點，以此類推，當然實際程式碼實現還要加些判斷，如當前點選操作項是否已經是置底或置底了，如果是則給點相應提示，好讓操作者知道發生了什麼事情。 具體原

糾正：Android RecyclerView滾動到指定位置並置頂（滾動方法、移動置頂、定位滑動到指定位置item）

最近博主發現讓RecyclerView滑動到某一位置並置頂的部落格一大堆，抄的是完全一模一樣。此外，雖然這些部落格“解決”了這些問題，但這種解決方案過於淺顯、粗暴，甚至都違背了開發思想。遂在此糾正這種錯誤。 RecyclerView提供了幾種移動的方法 scrollToP

控制標籤上移、下移、置頂、置底

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrom

jquery實現table動態新增行、刪除行以及行的上移和下移

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>  

（轉載）利用SIFT和RANSAC算法（openCV框架）實現物體的檢測與定位，並求出變換矩陣（findFundamentalMat和findHomography的比較） 置頂

bsp 解釋 邊界 返回值 class 不同的 rip 很多 per 原文鏈接：https://blog.csdn.net/qq_25352981/article/details/46914837#commentsedit 本文目標是通過使用SIFT和RANSAC算

Android仿ios微信左劃條目刪除、置頂的實現，程式碼簡潔，更容易理解使用

<span style="font-family:Arial, Helvetica, sans-serif;"><span style="background-color: rgb(255, 255, 255);">歡迎大家</span></span

左滑操作(刪除，置頂等。。。)

在滑動列表中，常常會有左滑出現刪除，置頂操作的需求，如下qq的左滑效果： 今天也來實現下類似的效果，可供大家參考： 1.實現原理 原理圖 2.實現自定義左滑View 1.新增View 首先在自定義V

上移，下移 ，置頂，至尾，批量刪除更新排序....

宣告：所有文章僅僅是個人筆記，不用做教程，只適合自己用（因為我怕不符合大眾，容易引起誤導） 原理部分： 前提：在資料庫設定一個sort，根據資料庫資料的條數自增，不可重複。   上移：從前臺獲取排序欄位（我把它定為sort）；根據sort，找到要交換的資料的id備用；然

仿QQ對話列表滑動刪除與置頂的原理及實現

接下來，我們將完成QQ聊天介面的ListView滑動效果，大家可能都用過ListView,知道ListView是上下滑動的，並不會產生左右滑動的效果，如果想讓ListView變成左右滑動的效果，必須對安卓原始碼有所瞭解，如果你想了解原始碼，請到http://blog.csd

Android專案：仿微信聊天的刪除，置頂。

首先我們要重寫上下文選單方法onCreateContextMenu，從這個方法可以新增需要的條目按鈕，我們要在res/menu目錄下建議個weixin.xml檔案： <?xml version="1.0" encoding="utf-8"?> <menu

java 8 與 java 7 ， 包 與 類 新增和刪除的對比

java8 新增： java.time java.util.function java.util.stream com.sun.source.doctree com.sun.org.apache.xml.internal.security.signature.refere

左滑菜單（刪除、置頂）

gin 所有 nbsp func stl lis mod cli img <div class="xinzhibox"> <div class="list"> <div class="xinzhilis

Popup 解決StayOpen=true時，置頂的問題

ready readonly protect () pub over red marshal con /// <summary> /// 解決StayOpen=true時，永遠置頂問題的Popup控件 /// </summary>

用pyquery 初步改寫崔慶才的 抓取貓眼電影排行（正在更新）特意置頂，提醒自己更新

items parse rac info sco ber windows time ont 目前正在學Python爬蟲，正在讀崔慶才的《Python3網絡爬蟲開發實戰》，之前學習正則表達式，但是由於太難，最後放棄了（學渣的眼淚。。。。），在這本書上的抓取貓眼電影排行上，

實現滾輪監聽，導航欄置頂的效果。

nav idt ack doc color win ID cti col 為了項目的制作，需要一個導航欄置頂的效果，遇到了點難度，但還是克服了，通過比較導航和滾動條的高度實現置頂效果 <div id="daohang" style="width:100%;heig

Flex中如何利用seriesFilters屬性，新增/刪除LineChart圖表曲線陰影

Flex中如何利用seriesFilters屬性，新增/刪除LineChart圖表曲線陰影 分類： flex  flex date application function layout

交管系統，介面，UI新增刪除課程

from selenium import webdriver import time import string, random import requests import pprint sele刪除課程 def Delete_Course(): driver = webdri