<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><selectid="sid"><option>请选择</option></select></body><scripttype="text/javascript"async>// 演示数据,可换成ajax请求数据
list =[{ id:1, name:'jia'},{ id:2, name:'li'}]// 获取初始的selectlet fatherSel = document.getElementById("sid")// select添加optionfor(var i =0; i < list.length; i++){selectAppendOpt(fatherSel, list[i].id, list[i].name)}/**
* 动态添加select,参数id可以不要,这里主要为演示数据不同使用
*/letliveAppend=(id)=>{// 演示数据,可换成ajax请求数据var data =[{ id:1+ id, name:'zzz'+ id },{ id:2+ id, name:'qqq'+ id }];// 创建下一个selectlet select = document.createElement('select')// 设置属性,可以不要
select.setAttribute('id', id)// 添加空选项let tempOpt = document.createElement('option')
tempOpt.append(document.createTextNode('请选择'))
select.append(tempOpt)// 添加选项for(var i =0; i < data.length; i++){selectAppendOpt(select, data[i].id, data[i].name)}// 获取所有selectvar allSelects = document.getElementById('sid').parentNode.children
// 获取当前页面最后一个selectlet lastSelect = allSelects[allSelects.length -1]// 添加新的select
lastSelect.after(select);// 新select绑定监听事件
select.addEventListener('change',function(){let selectIndex =this.selectedIndex // 选中索引
id =this.options[selectIndex].value // 选中valuevar text =this.options[selectIndex].text // 选中文本// 删除当前select标签之后的DOMdelLastNode(this)// 选空时不执行后面的添加操作if(id !=='请选择'){liveAppend(id)}})}// 为首个select添加监听事件
document.getElementsByTagName('select')[0].addEventListener('change',function(){// console.log(this);let selectIndex =this.selectedIndex
var id =this.options[selectIndex].value
var text =this.options[selectIndex].text
// 删除当前select标签之后的DOMdelLastNode(this)// 选空时不执行后面的添加操作if(id !=='请选择'){liveAppend(id)}})/**
* 为select标签添加option选项
* @param {DOM} sel select元素
* @param {str} optVal 选项值value
* @param {str} optContent 选项展示的文本
* @return void
*/functionselectAppendOpt(sel, optVal, optContent){let tempOpt = document.createElement('option')
tempOpt.append(document.createTextNode(optContent))let value = document.createAttribute('value')
value.value = optVal
tempOpt.setAttributeNode(value)
sel.append(tempOpt)}/**
* 删除curNode之后的所有兄弟html元素
* @param {DOM} curNode 基准DOM,删除该DOM之后的兄弟元素
* @return void
*/functiondelLastNode(curNode){let parentNode = curNode.parentNode
let brotherNodes = parentNode.children
let haveFind =falsefor(let i =0; i < brotherNodes.length; i++){// 获取的兄弟元素中包含了script标签,要排除,js写在body里面,但是页面看却在body外面,和select元素一级,搞不懂if(brotherNodes[i]['localName']!=='script'){if(haveFind){
brotherNodes[i--].remove()}if(brotherNodes[i]=== curNode){
haveFind =true}}}}</script></html>
jQuery实现:
<html><head><scripttype="text/javascript"src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){
list =[{ id:1, name:'jia'},{ id:2, name:'li'}]//遍历响应的城市信息for(var i =0; i < list.length; i++){$("#sid").append("<option value='"+ list[i].id +"'>"+ list[i].name +"</option>");}letliveAppend=(id)=>{// id = Number(id)var data =[{ id:1+ id, name:'zzz'+ id },{ id:2+ id, name:'qqq'+ id }];var select =$("<select></select>")$('<option>'+'请选择'+'</option>').appendTo(select)for(var i =0; i < data.length; i++){$('<option value="'+ data[i].id +'">'+ data[i].name +'</option>').appendTo(select)}$("select:last").after(select);$("select:last").on('change',function(){//获取选中的id号
id =$(this).val();$(this).nextAll().remove();if(id !=='请选择'){liveAppend(id +1)}})}$("select").on('change',function(){//获取选中的id号var id =$(this).val();$(this).nextAll().remove();if(id !=='请选择'){liveAppend(id +1)}})})</script></head><body><selectid="sid"><option>请选择</option></select></body></html>