继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

使用JS,如何给下拉列表动态的添加一个option 选项?

UFO2015
关注TA
已关注
手记 11
粉丝 39
获赞 682

How to Adding and Removing Options in a Select Box dynamic ?
图片描述

Demo:
运用js实现select动态添加option:

//1.动态创建select
function createSelect(){
    var mySelect = document.createElement("select");
    mySelect.id = "mySelect"; 
    document.body.appendChild(mySelect);
}

//2.添加选项option
function addOption(){
    //根据id查找对象,
    var obj=document.getElementById('mySelect');
    //添加一个选项
    obj.add(new Option("文本","值"));    //方法一:
    obj.options.add(new Option("text","value")); //方法二:
    for(var i=0;i<10;i++){
        obj.options[i]=new Option("新文本","新值");    //方法三:
    }
}

//3.删除所有选项option
function removeAll(){
    var obj=document.getElementById('mySelect');
    obj.options.length=0;
}

//4.删除一个选项option
function removeOne(){
    var obj=document.getElementById('mySelect');
    var index=obj.selectedIndex;    //index,要删除选项的序号
    obj.options.remove(index);
}

//5.获得选项option的值
var 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);
}

参考链接:
https://msdn.microsoft.com/en-us/library/dd757810(v=vs.85).aspx
http://www.cnblogs.com/duanhuajian/archive/2013/06/09/3129365.html
http://www.javascriptkit.com/jsref/select.shtml

打开App,阅读手记
15人推荐
发表评论
随时随地看视频慕课网APP

热门评论

第一次见到new option,平时要多练习,不同的需求才会让人思考的更多。

查看全部评论