JS对select动态添加option操作（三级联动）（搜索拼接）

以下纯属自我理解之下再东搜西查的内容~

JS对select动态添加option操作有个高大上的艺名叫多级联动：第一级改变时，第二级跟着变，第二级改变时，第三级跟着变。。。

本菜鸟是在工作中遇到做收货地址的需求，根据国家选择不同省份，选择了不同省份之后相应给出对应的城市名称。

var valueItem=new Option(city.name,city.name);
document.getElementById('#select').options.add(valueItem);
首先这里用到一个add()方法，需要注意的是这里的这个方法是JS的方法。

以下是菜鸟教程内容：

下面复制一个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script>
        function displayResult(){
            var x=document.getElementById("mySelect");
            var option=document.createElement("option");
            option.text="Kiwi";
            try{
                // 对于更早的版本IE8
                x.add(option,x.options[null]);
            }catch (e){
                x.add(option,null);
            }
        }
    </script>
</head>
<body>

<form>
    <select id="mySelect">
        <option>Apple</option>
        <option>Pear</option>
        <option>Banana</option>
        <option>Orange</option>
    </select>
</form>
<br>
<button type="button" onclick="displayResult()">插入选项</button>
<p><b>注意:</b>add()方法在IE8或更高版本中正常工作,要在页面中添加一个!DOCTYPE声明。对于IE 8之前的版本还要注意额外的代码。</p>
</body>
</html>


以下是博客园 Leoxlu的内容:

标准的做法是 s.options.add();
但是如果你一定要用 s.appendChild(option);
注意了，你只能用如下两种方式之一:
1.  
     s.appendChild(option);
     option.text = 'hello world';
     option.value =3;
   也就是，一定要先添加到 select 中，然后再为 option 赋值。否则在 FF 下是显示正常的，但是在 IE6 中显示的是空白
 
2. 如果你要讲 option.text 和 option.value 的赋值放在前面，那么请用 option.innerHTML 而不是 option.text
  如下: 
    option.innerHTML = 'hello world';
    opion.value = 3;
    option.appendChild(option);

// 动态添加select中的项option:
function addOneOption(){
      //document.getElementById("user_dm").options.add(new Option(2,"mytest"));

   var selectObj=document.getElementById("user_dm");
   alert(selectObj.length);
   selectObj.options[selectObj.length] = new Option("mytest", "2");
}
</script>

秒客网

JS对select动态添加option操作（三级联动）（搜索拼接）

相关文章

JS对select动态添加option操作 （三级联动） （搜索拼接）

相关文章

JS对select动态添加option操作（三级联动）（搜索拼接）