碼上歡樂
相關內容    簡體    繁體

html的下拉框的幾個基本使用方法

本文轉載自   查看原文   2014-05-31 16:16   10005 
盡管使用EXT開發了一段時間，可是自己認為我對javascript還是不是非常熟，所以邊看書邊做小樣例 給自己以后用到的時候查看下，都是非常主要的東西，對剛開始學習的人可能有點幫助

以下是代碼
Java代碼 復制代碼
  1. <html>   
  2.     <head>   
  3.         <meta http-equiv="Content-Type" content="text/html; charset=gbk">   
  4.         <title>grid</title>   
  5.   
  6.   
  7.          
  8.     </head>   
  9.     <body>   
  10.       <input type="button" value="getSelect" onclick = "getSelect()"/>   
  11.       <input type="button" value="selectbtn" onclick = "getSelAge()"/>   
  12.         
  13.       <div>   
  14.       <select name="selectAge" id="selectAge">   
  15.         <option value="1">18-21</option>   
  16.         <option value="2">22-25</option>   
  17.         <option value="3">26-29</option>   
  18.         <option value="4">30-35</option>   
  19.         <option value="5">Over35</option>   
  20.            
  21.       </select>   
  22.       </div>   
  23.       <p>   
  24.        <input type="button" value="moreSelect" onclick = "moreSelect()"/>   
  25.       <div>   
  26.         <div>多選 須要添加 multiple屬性<br>   
  27.             在多選中size屬性 能夠初始化下拉框默認顯示幾個選項   
  28.         </div>   
  29.         <div>   
  30.         <select name="moreselAge" id="moreselAge" multiple="multiple">   
  31.         <option value="1">18-21</option>   
  32.         <option value="2">22-25</option>   
  33.         <option value="3">26-29</option>   
  34.         <option value="4">30-35</option>   
  35.         <option value="5">Over35</option>   
  36.         <option value="6">Over40</option>   
  37.         <option value="7">Over50</option>   
  38.            
  39.       </select>   
  40.         </div>   
  41.       </div>   
  42.   
  43.       <p></p>   
  44.        <input type="button" value="addNewbtn" onclick = "addNewSelections()"/>   
  45.         <input type="button" value="deletebtn" onclick = "deleteselections()"/>   
  46.   
  47.         <input type="button" value="deleAllbtn" onclick = "deleteAllSelections()"/>   
  48.        <div>selectName :<input type="text" id="txtName"/></div>   
  49.        <div>selectValue:<input type="text" id="txtValue"/></div>   
  50.   
  51.   
  52.        <div>   
  53.         <select name="moreselAge" id="addNew">   
  54.         <option value="1" selected>18-21</option>   
  55.         <option value="2">22-25</option>   
  56.         <option value="3">26-29</option>   
  57.         <option value="4">30-35</option>   
  58.         <option value="5">Over35</option>   
  59.         <option value="6">Over40</option>   
  60.         <option value="7">Over50</option>   
  61.            
  62.       </select>   
  63.         </div>   
  64.   
  65.     <p>移動選項</p>   
  66.      <p>   
  67.      <table>   
  68.         <tr collspan="2">   
  69.             <td>   
  70.                    <div>   
  71.                 <select name="moreselAge" id="move1"  multiple="multiple" size="7">   
  72.                 <option value="1">18-21sfiods</option>   
  73.                 <option value="2">22-25sjdfd</option>   
  74.                 <option value="3">26-29xxs</option>   
  75.                 <option value="4">30-35vs</option>   
  76.                 <option value="5">Over35dcff</option>   
  77.                 <option value="6">Over40shhfsd</option>   
  78.                 <option value="7">Over50sdefs</option>   
  79.                 <option value="8">Over88www</option>   
  80.                    
  81.               </select>   
  82.                 </div>   
  83.                
  84.             </td>   
  85.             <td width="100" align="center">   
  86.                 <input type="button" value=">" onclick = "rightSingle()" /><br>   
  87.                  <input type="button" value=">>" onclick = "rightAll()"/><br>   
  88.                  <input type="button" value="<" onclick = "leftSingle()"/><br>   
  89.                  <input type="button" value="<<" onclick = "leftAll()"/>   
  90.             </td>   
  91.                
  92.             <td>   
  93.                 <div>   
  94.                 <select name="moreselAge" id="move2"  multiple="multiple" size="7">   
  95.                 <option value="1">18-21</option>   
  96.                 <option value="2">22-25</option>   
  97.                 <option value="3">26-29</option>   
  98.                 <option value="4">30-35</option>   
  99.                 <option value="5">Over35</option>   
  100.                 <option value="6">Over40</option>   
  101.                 <option value="7">Over50</option>   
  102.                 <option value="8">Over88</option>   
  103.                    
  104.               </select>   
  105.                 </div>   
  106.             </td>   
  107.         <tr>   
  108.      </table>   
  109.   
  110.   
  111.   
  112.           
  113.     </body>   
  114.     <script type="text/javascript">   
  115.         //獲得下拉列表對象   
  116.         oListbox = document.getElementById("selectAge");   
  117.         var ListUtil = new Object();   
  118.            
  119.   
  120.         var selectbtn = document.getElementById("selectbtn");   
  121.   
  122.          function getSelAge (){   
  123.         //訪問選項   
  124.             alert(oListbox.options[1].firstChild.nodeValue); //顯示的內容   
  125.   
  126.             alert(oListbox.options[1].getAttribute("value"));//相應的value   
  127.   
  128.             alert("獲得它在集合中的位置== " + oListbox.options[2].index); //獲得它在集合中的位置   
  129.   
  130.             alert("獲得集合的元素個數長度== " + oListbox.options.length); //獲得集合的元素個數長度   
  131.         }   
  132.     /*************************************************************************************************/  
  133.         //獲得選中選項   
  134.         function getSelect(){   
  135.             var indx = oListbox.selectedIndex;   
  136.             alert("獲得選中的選項的索引 "+ indx );   
  137.         }   
  138.            
  139.         //多選下拉框   
  140.         var moreselAgeList = document.getElementById("moreselAge");    
  141.   
  142.     /*******************************************************************/  
  143.   
  144.         //入參 下拉框對象   
  145.         ListUtil.getSelectIndexes = function (oListbox){   
  146.             var arrIndexes =  new Array();   
  147.             for(var i=0 ; i<oListbox.options.length;i++){   
  148.                 //假設該項被選中則把該項相應的索引加入到數組中   
  149.                 if(oListbox.options[i].selected){   
  150.                         arrIndexes.push(i);   
  151.                 }   
  152.             }   
  153.             return  arrIndexes; //返回選中的選項索引   
  154.         }   
  155.   
  156.     /***************************************************************/  
  157.     // 多選   
  158.         function moreSelect(){   
  159.             var arrIndexes = ListUtil.getSelectIndexes(moreselAgeList);   
  160.             alert("選中的數組length = "+ arrIndexes.length + " 選中的選項索引為 ："+ arrIndexes);   
  161.         }   
  162.   
  163. /************************加入新選項***************************************************************/  
  164.     //   
  165.     var addNewLisbox = document.getElementById("addNew"); //獲得下拉框對象   
  166.     var otxtName = document.getElementById("txtName");   //name 文本框   
  167.     var otxtValue  = document.getElementById("txtValue"); //value 文本框   
  168.        
  169.   
  170.     //加入方法   
  171.     ListUtil.addOptions = function(oListbox,sName,sValue){   
  172.            
  173.         var arryV = new Array();   
  174.         //標記輸入的值能否夠加入   
  175.         var isAdd = false;   
  176.         //推斷是否有反復的值   
  177.         for(var i =0 ;i<oListbox.options.length;i++){   
  178.             var sv = oListbox.options[i].getAttribute("value");   
  179.             if(sv == sValue){   
  180.                 alert("不能加入反復的value");   
  181.                 return ;   
  182.             }else{   
  183.                 isAdd = true;   
  184.             }   
  185.         }   
  186.   
  187.         if(isAdd || oListbox.options.length == 0){     
  188.   
  189.             //以下使用dom方法創建節點   
  190.             var oOption = document.createElement("option");// 創建option元素   
  191.             oOption.appendChild(document.createTextNode(sName));   
  192.   
  193.             //由於選項的值不是必須的，所以假設傳入了值 則加入進來   
  194.             if(arguments.length == 3){   
  195.                 oOption.setAttribute("value",sValue);   
  196.             }   
  197.             oListbox.appendChild(oOption); //把選項加入進列表框   
  198.             alert("加入成功!!");   
  199.   
  200.         }       // end if(isAdd)   
  201.            
  202.   
  203.     }   
  204.   
  205.     //加入button的點擊事件方法   
  206.     function addNewSelections(){   
  207.         var txtname = otxtName.value;   
  208.         var txtvalue = otxtValue.value;   
  209.         if(txtname != "" && txtvalue != ""){   
  210.             ListUtil.addOptions(addNewLisbox,txtname,txtvalue);//加入新項   
  211.             otxtName.value = "";   
  212.             otxtValue.value = "";   
  213.            
  214.         }else{   
  215.             alert("請輸入要加入的值和name");   
  216.             return;   
  217.         }   
  218.     }   
  219.   
  220. /*******************刪除選中選項****************************************************************/  
  221.   
  222. //傳入下拉框對象和(索引)   
  223. ListUtil.deleteOptons = function(oListbox){   
  224.     var selIndex = oListbox.selectedIndex;   
  225.   
  226.     if(oListbox.options.length == 0){   
  227.         alert("列表中無元素可刪除");   
  228.         return ;   
  229.     }   
  230.     oListbox.remove(selIndex); //刪除選中的選項   
  231. }   
  232.   
  233. //刪除button點擊事件   
  234. function deleteselections(){   
  235.   
  236.     ListUtil.deleteOptons(addNewLisbox);   
  237. }   
  238.   
  239. /**********刪除全部***********************************************************************/  
  240. ListUtil.deletsAllOptions = function(oListbox){   
  241.     if(oListbox.options.length != 0){          
  242.         for(var i= oListbox.options.length-1;i>=0;i--){  //倒着刪除是由於   
  243.             oListbox.remove(i);   
  244.         }   
  245.     }else{   
  246.         alert("該列表為空!");   
  247.     }   
  248. }   
  249.   
  250. function deleteAllSelections(){   
  251.     ListUtil.deletsAllOptions(addNewLisbox);   
  252. }   
  253.   
  254. /*******移動選項***************************************************************************************/  
  255.     
  256.  //獲得下拉框    
  257.   var move1Listbox = document.getElementById("move1"); //左邊下拉框   
  258.   var move2Listbox = document.getElementById("move2"); //右邊下拉框   
  259.   
  260.   //移動一個或多個選中的選項   
  261.   ListUtil.move = function(oListboxFrom ,oListboxTo){   
  262.     //var idx1 = oListboxFrom.selectedIndex;   
  263.     var arrIndexes = ListUtil.getSelectIndexes(oListboxFrom);   
  264.     var oOption ;   
  265.   
  266.     if(arrIndexes.length == 0 ){   
  267.         alert("請選擇至少一個選項!");   
  268.         return ;   
  269.     }else{   
  270.   
  271.         for(var i=oListboxFrom.options.length-1;i>=0;i--){   
  272.              oOption = oListboxFrom.options[i];            
  273.             if(oOption.selected && oOption != null ){   
  274.                 oListboxTo.appendChild(oOption);   
  275.             }   
  276.            
  277.         }   
  278.   
  279.     }      
  280.        
  281.   }   
  282.   
  283.   //向右移 一個元素   
  284.   function rightSingle(){   
  285.   
  286.     ListUtil.move(move1Listbox,move2Listbox);   
  287.   };   
  288.   
  289.   //向左移 一個元素   
  290.   function leftSingle(){   
  291.     ListUtil.move(move2Listbox,move1Listbox);   
  292.   }   
  293.   
  294.   ListUtil.moveAll = function(oListboxFrom,oListboxTo){   
  295.     for(var i=oListboxFrom.options.length-1;i>=0;i--){   
  296.         oOption = oListboxFrom.options[i];   
  297.         //alert(oOption);   
  298.         oListboxTo.appendChild(oOption);   
  299.     }   
  300.   }   
  301.   
  302.   //向右移全部選項   
  303.   function rightAll(){   
  304.   
  305.      ListUtil.moveAll(move1Listbox,move2Listbox);   
  306.   }   
  307.   
  308.   //向左移全部選項   
  309.   function leftAll(){   
  310.     ListUtil.moveAll(move2Listbox,move1Listbox);   
  311.   }   
  312.   
  313.   
  314.   
  315.     </script>   
  316. </html>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 bootstrap中selectpicker下拉框使用方法實例 html如何讓div有下拉框 MVC下拉框Html.DropDownList 和DropDownListFor 的常用方法 MVC 中的@Html.DropDownList下拉框的使用 MVC下拉框 一一 @Html.DropDownList使用 HTML xm-select多選下拉框的使用 Vue使用枚舉類型實現HTML下拉框 javaFX使用枚舉實現html中下拉框功能 [轉]html 下拉框級聯 html select 下拉框ajax 請求
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM