商务合作:179001057@qq.com

主题:js下拉列表框操作总结

技术2022-05-12  0


某平台价值19860元的编程课程资料免费领取【点我领取】


  

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">  <html>  <head>  <title>JavaScript强化训练--下拉列表的操作01</title>  <script  language="JavaScript" type="text/javascript">        //移动下拉框被选中选项       //fromSelId :源下拉框id       //toSelId   :目标下拉框id       function moveOption(fromSelId,toSelId){           var fromSel = document.getElementById(fromSelId);           var toSel = document.getElementById(toSelId);             if(fromSel==null||toSel==null){               return false;           }             for(var i = 0;i < fromSel.options.length;i++){               var _option = fromSel.options[i];               //是否选中               if(_option.selected){                   //往目标下拉框加添加选项                   toSel.appendChild(_option);                   i--;//下标变了               }           }       }     </script>  </head>    <body bgcolor="abcdef">  <form id='demoFrm' name="demoFrm" method="post" action="" >    <table border="1" align="center" width="300">  <tr>      <td colspan="3" align="center">下拉列表操作的演示</td>  </tr>  <tr>      <td  align="center" width="100">          <select multiple="multiple" size="10" id="leftSel">              <option value="1">第一个理拉框的值1</option>              <option value="2">第一个理拉框的值2</option>              <option value="3">第一个理拉框的值3</option>              <option value="4">第一个理拉框的值4</option>          </select>      </td>      <td align="center" width="100">          <input type="button"  id="moveTwo" value="-->>" onclick="moveOption('leftSel','rightSel');">          <br>          <input type="button"  id="moveOne" value="<<--" onclick="moveOption('rightSel','leftSel');">      </td>      <td align="center" width="100">          <select multiple="multiple" size="10" id="rightSel">              <option value="1">第二个理拉框的值1</option>              <option value="2">第二个理拉框的值2</option>              <option value="3">第二个理拉框的值3</option>              <option value="4">第二个理拉框的值4</option>          </select>      </td>  </tr>  </table>    </form>    <div id="showContent" style="font-size:30px;">  </div>  </body>  </html>   <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>JavaScript强化训练--下拉列表的操作01</title> <script language="JavaScript" type="text/javascript"> //移动下拉框被选中选项 //fromSelId :源下拉框id //toSelId :目标下拉框id function moveOption(fromSelId,toSelId){ var fromSel = document.getElementById(fromSelId); var toSel = document.getElementById(toSelId); if(fromSel==null||toSel==null){ return false; } for(var i = 0;i < fromSel.options.length;i++){ var _option = fromSel.options[i]; //是否选中 if(_option.selected){ //往目标下拉框加添加选项 toSel.appendChild(_option); i--;//下标变了 } } } </script> </head> <body bgcolor="abcdef"> <form id='demoFrm' name="demoFrm" method="post" action="" > <table border="1" align="center" width="300"> <tr> <td colspan="3" align="center">下拉列表操作的演示</td> </tr> <tr> <td align="center" width="100"> <select multiple="multiple" size="10" id="leftSel"> <option value="1">第一个理拉框的值1</option> <option value="2">第一个理拉框的值2</option> <option value="3">第一个理拉框的值3</option> <option value="4">第一个理拉框的值4</option> </select> </td> <td align="center" width="100"> <input type="button" id="moveTwo" value="-->>" οnclick="moveOption('leftSel','rightSel');"> <br> <input type="button" id="moveOne" value="<<--" οnclick="moveOption('rightSel','leftSel');"> </td> <td align="center" width="100"> <select multiple="multiple" size="10" id="rightSel"> <option value="1">第二个理拉框的值1</option> <option value="2">第二个理拉框的值2</option> <option value="3">第二个理拉框的值3</option> <option value="4">第二个理拉框的值4</option> </select> </td> </tr> </table> </form> <div id="showContent" style="font-size:30px;"> </body> </html>

 向select对象里添加option的2中常见方法

 方法1:

Js代码 var option = new Option(text,value);//注意参数1为文本显示值,参数为value值   selectobj.options.add(option);   var option = new Option(text,value);//注意参数1为文本显示值,参数为value值 selectobj.options.add(option);

 方法2:

Js代码 var option = document.createElement("option");   option.appendChild(document.createTextNode("text"));   option.setAttribute("value","value");   selectobj.appendChild(option );   var option = document.createElement("option"); option.appendChild(document.createTextNode("text")); option.setAttribute("value","value"); selectobj.appendChild(option );

 

 重要属性

 1 ,options(为一个Option对象数组)

 2 ,selectedIndex 为选中项的索引

 重要方法

 1, appencChild(option)添加一个选项

 2, remove(0)  0表示索引号

 


最新回复(0)