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

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);

<script>
//动态删除select中的所有options：
function delAllOptions(){
      document.getElementById("user_dm").options.length=0;
}
//动态删除select中的某一项option：
function delOneOption(indx){
      document.getElementById("user_dm").options.remove(indx);
}

// 动态添加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操作 （三级联动）  （搜索拼接）的更多相关文章
	

    
								
  1. JS对select动态添加options操作[IE&FireFox兼容]
		
    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
    
		
    2. 
						
  2. js实现select动态添加option
		
    关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...
    
		
    3. 
						
  3. JS对select动态添加options操作（主流浏览器兼容）
		
    之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
    
		
    4. 
						
  4. js对select动态添加和删除OPTION
		
    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
    
		
    5. 
						
  5. 使用js对select动态添加和删除OPTION示例代码
		
    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...
    
		
    6. 
						
  6. 使用js对select动态添加和删除OPTION
		
    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
    
		
    7. 
						
  7. select 动态添加option函数
		
    转自:https://lym6520.iteye.com/blog/309937 经常会用到select动态添加元素,写了个方法,方便调用!  ... /** * 功能:select对象动态添加Opt ...
    
		
    8. 
						
  8. layui select动态添加option
		
    <form class="layui-form" action=""> <div class="layui-form-item pr ...
    
		
    9. 
						
  9. 利用js给datalist或select动态添加option选项
		
    <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type=& ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Dapper源码学习和源码修改（下篇）
			
    目录: Dapper源码学习和源码修改(上篇主要讲解入参解析) Dapper源码学习和源码修改(下篇主要讲解出参解析) 继上篇讲了下自己学习Dapper的心得之后,下篇也随之而来,上篇主要讲的入参解析 ...
    
			
    2. 
						
  2. 第一章：shiro简介
			
    1.1 简介 Apache Shiro是java的一个安全框架,相当简单,没有Spring Security功能强大,但是实际工作中大多使用shiro就够了.可以帮助我们完成:认证,授权,加密,会话管 ...
    
			
    3. 
						
  3. 【canvas系列】canvas实现"雷达扫描"效果
			
    今天来讲解"雷达扫描"效果demo,来源于QQ群里边有群友说想要个雷达效果,就尝试写了一下. 效果图: demo链接: https://win7killer.github.io/c ...
    
			
    4. 
						
  4. 浅谈C10K问题
			
    在大型的APP中进行高并发的访问,淘宝,支付宝,微信,QQ,等 C10K问题:高并发的进行访问 C10K问题的最大特点是:设计不够良好的程序,其性能和连接数及机器性能的关系往往 是非线性的.举个例子: ...
    
			
    5. 
						
  5. 20155304 2016-2017-2 《Java程序设计》第六周学习总结
			
    20155304 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 串流设计的概念 无论来源和目的地实体形式是什么,只要取得InputStream和Ou ...
    
			
    6. 
						
  6. Java基础之RTTI 运行时类型识别
			
    运行时类型识别(RTTI, Run-Time Type Identification)是Java中非常有用的机制,在Java运行时,RTTI维护类的相关信息. 多态(polymorphism)是基于R ...
    
			
    7. 
						
  7. POPTEST   测试开发      免费培训课程报名
			
    poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...
    
			
    8. 
						
  8. c++中enum的用法——枚举类型
			
    将变量的可取值全部列举出来,写在程序的开头,使用该类型的时候显示地指定取值即可(即对枚举变量进行赋予元素操作,这里之所以叫赋元素操作不叫赋值操作就是为了说明枚举变量是不能直接赋予算数值的). 如: e ...
    
			
    9. 
						
  9. 事务隔离级别与传播机制，spring+mybatis+atomikos实现分布式事务管理
			
    1.事务的定义:事务是指多个操作单元组成的合集,多个单元操作是整体不可分割的,要么都操作不成功,要么都成功.其必须遵循四个原则(ACID). 原子性(Atomicity):即事务是不可分割的最小工作单 ...
    
			
    10. 
						
  10. Timer,TimerTask通过程序计数器实现的定时任务
			
    1.程序计数器 程序计数器(Program Counter Register)是一块较小的内存空间,它的作用可以看 做是当前线程所执行的字节码的行号指示器.在虚拟机的概念模型里(仅是概念模型, 各种虚 ...
    
			
    11.