动态添加或删除select的option

操作Select元素

最新推荐文章于 2025-01-16 13:52:22 发布

原创最新推荐文章于 2025-01-16 13:52:22 发布 · 370 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用JavaScript动态创建、操作及删除HTML中的Select下拉框元素，包括添加、删除选项，设置选定值等实用技巧。

1. 动态创建select

 function createSelect(){
var mySelect = document.createElement("select");
          mySelect.id = "mySelect"; 
          document.body.appendChild(mySelect);
  }

设置select的选定值：

$("#type").attr('value', user_type);

2. 添加option

 function addOption(){
          //根据id查找对象，
           var obj=document.getElementById('mySelect');
           //添加一个选项
obj.add(new Option("文本","值"));    //这个只能在IE中有效
         obj.options.add(new Option("text","value")); //这个兼容IE与firefox
     }

3.删除所有的iption

 function removeAll(){
           var obj=document.getElementById('mySelect');
obj.options.length=0;
     }

4.删除一个option

function removeOne(){
           var obj=document.getElementById('mySelect');
           //index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
     }

5. 获得option选项的值

ar obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;

6.获得option的文件

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;

7. 修改option选项

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

8. 删除select

 function removeSelect(){
            var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
     }