zoukankan      html  css  js  c++  java

  • html的下拉框的几个基本使用方法

    尽管使用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>
  • 相关阅读:
    API测试之Postman使用完全指南(Postman教程，这篇文章就够了)
    asp.net的webservice
    表和索引的结构（笔记）
    基于Nginx+PHP+Redis的短URL系统的实现 新风宇宙
    数据结构与算法（php版） 新风宇宙
    discuz7.2 昵称替换用户名 新风宇宙
    gVim7.3（Vim7.3）文本编辑器详细配置文件和配色方案 新风宇宙
    Discuz的Memcache缓存实现 新风宇宙
    GitHub使用（二） 从代码库下载代码到本地 新风宇宙
    PHPredis中文文档 新风宇宙
  • 原文地址：https://www.cnblogs.com/hrhguanli/p/3826029.html
Copyright © 2011-2022 走看看