js操作select控件

  1.js可以動態產生select控件:

  語句如下: var se=document.createElement("select");
                    se.id="se_test";
                    se.options.add(new Option("text","value"));
                    document.body.appendChild(se);

2.select控件的添加和刪除操作完整的html代碼,給大家分享一下

 

 

<html>
<head>
<title>測試操作select</title>
<mce:script type="text/javascript"><!--
      /*
       *數據初始化
       */
    function loadData(){
      //定義常量數組
      var array=new Array();
      array[0]="星期一";
      array[1]="星期二";
      array[2]="星期三";
      array[3]="星期四";
      array[4]="星期五";
      //獲取select控件
      var obj=document.getElementById("se_test");
      obj.options.length=0;
      //控件初始化操作,動態添加option
      for(var i=0;i<array.length;i++){
            addOp(obj,array[i],array[i]);
      }
    }
   
    function  addOp(obj,key,value){
          
          var op=new Option(key,value);
          obj.options.add(op);
    }
   
    function addOption(){
   
       var obj=document.getElementById("se_test");
       var key=document.getElementById("tx_name").value;
       var value=document.getElementById("tx_value").value;
       addOp(obj,key,value);
    }
   
    function  delOp(){ 
       var obj=document.getElementById("se_test"); 
       obj.options.remove(obj.selectedindex);
       obj.options.selectedIndex=0;
    }
   
    function truncateOp(){
      var obj=document.getElementById("se_test");
      obj.options.length=0;
    }
   
    function alertSelectItem(){
    var obj=document.getElementById("se_test");
       var ops=obj.options[obj.selectedIndex];
       alert("text="+ops.text+":"+"value="+ops.value);
    }
// --></mce:script>
</head>
<body οnlοad="loadData()">
    <table>
     <tr>
       <td ><label>測試select操作</label></td>
       <td>
        <select id="se_test" name="se_test">
        </select>
       </td>
     </tr>
    </table>
    <table>
     <tr>
      <td><label>名稱</label></td>
      <td><input type="text" id="tx_name"></td>
      <td><label>值</label></td>
      <td><input type="text" id="tx_value"></td>
     </tr>
    </table>
   
    <input type="button" οnclick="addOption()" value="添加">
    <input type="button" οnclick="delOp()" value="刪除">
    <input type="button" οnclick="loadData()" value="初始化">
    <input type="button" οnclick="truncateOp()" value="清空"> 
    <input type="button" οnclick="alertSelectItem()" value="顯示選中內容"> 
</body>
</html>

發佈了31 篇原創文章 · 獲贊 1 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章