运用JS实现select动态添加option 有更新!

  |   0 评论   |   599 浏览

    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

    评论

    发表评论

    validate