JavaScript：动态生成下拉列表框

最新推荐文章于 2024-02-18 22:13:12 发布

不要停止思考-jcn

最新推荐文章于 2024-02-18 22:13:12 发布

阅读量5.7k

点赞数 4

分类专栏： # web前端大学与Java那些年

对你有帮助，你就转吧。

本文链接：https://blog.csdn.net/qq_41723615/article/details/89267414

版权

大学与Java那些年同时被 2 个专栏收录

803 篇文章 7 订阅

订阅专栏

web前端

69 篇文章 0 订阅

订阅专栏

范例：动态生成下拉菜单 TestDemo.htm

<!DOCTYPE html>
<html>
<head>
    <title>下拉框</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        var cityValue=new Array("001","002","003");
        var cityLabel=new Array("北京","广州","重庆");
       window.onload=function(){
          document.getElementById("loadBut");
          addEventListener("click",handleOption,false);
       }
       function handleOption(){
           //处理下拉菜单中的所有选项内容
           var cityElement=document.getElementById("city");
           //清空下拉列表项，设置保留的个数
         cityElement.length=1;
           for (var i = 0; i < cityValue.length; i++) {
                var optionElement=document.createElement("option");//创建option元素
                optionElement.setAttribute("value",cityValue[i]);
                optionElement.appendChild(document.createTextNode(cityLabel[i]));
                cityElement.appendChild(optionElement);
       }
   }
    </script>
</head>
<body>
  <div id="myDiv">
       请选择你所在的城市：<select id="city">
                              <option value="0">
                                  ======选择城市=======
                              </option>
                           </select>
 <button id="loadBut">读取城市信息</button>                          
  </div>
</body>
</html>

范例：实现选项变更 TestDemoA.htm

<!DOCTYPE html>
<html>
<head>
    <title>下拉框</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        var cityValue=new Array("001","002","003");
        var cityLabel=new Array("北京","广州","重庆");
       window.onload=function(){
          document.getElementById("ch").
          addEventListener("dblclick",changeOption,false);
          document.getElementById("inst").
          addEventListener("dblclick",changeOption2,false);

       }
       function changeOption2(){
         //如果要想取得当前的操作选项，使用this描述
         var value=this.value;
         var label;//保存标签结果
         //要找到发出选项的元素内容
        var optionSelected=getElement("inst",value);
        label=optionSelected.firstChild.nodeValue;
           //如果可以取出标签了，那么表示可以向另外一个下拉菜单设置选项内容了
           append("ch",value,label);
           deleteElement("inst",optionSelected);
       }
       function changeOption(){
         //如果要想取得当前的操作选项，使用this描述
         var value=this.value;
         var label;//保存标签结果
         //要找到发出选项的元素内容
        var optionSelected=getElement("ch",value);
        label=optionSelected.firstChild.nodeValue;
           //如果可以取出标签了，那么表示可以向另外一个下拉菜单设置选项内容了
           append("inst",value,label);
           deleteElement("ch",optionSelected);
       }
       function deleteElement(eleName,option){
//删除掉选项的内容
         document.getElementById(eleName).removeChild(option);
       }
       //根据下拉列表取出指定的option对象
       function getElement(eleName,value){
           var optionEle=document.getElementById(eleName).getElementsByTagName("option");
         //依次比较每一个option元素的内容目的是取出标签内容
         for (var i = 0; i < optionEle.length; i++)
          {
          if (optionEle[i].getAttribute("value")==value) {//表示当前选中的内容
             return optionEle[i];

          }
         }
       }
       function append(eleName,value,label){
        var optionElement=document.createElement("option");
        optionElement.setAttribute("value",value);
        optionElement.appendChild(document.createTextNode(label));
        document.getElementById(eleName).appendChild(optionElement);
       }
    </script>
</head>
<body>
  <div id="firstDiv">
       你的兴趣：<select id="ch" multiple size="10">
                       <option value="100">唱歌</option>
                  <option value="101">跳舞</option>
                  <option value="102">打架</option>
                  <option value="103">玩游戏</option>
                           </select>                
  </div>
  <div id="secondDiv">
       选择好的兴趣：<select id="inst" mutiple size="10"></select>
  </div>
</body>
</html>

不要停止思考-jcn

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：动态生成下拉列表框

范例：动态生成下拉菜单 TestDemo.htm<!DOCTYPE html><html><head> <title>下拉框</title> <meta charset="utf-8"> <script type="text/javascript"> var cit...
复制链接

扫一扫