动态生成下拉框
闽念
<html>
<head>
<meta charset="utf-8">
<style>
.ui-cont{margin-left:10px;}
.select select,label{margin-left:10px;}
</style>
</head>
<body>
<div class="">
<div class=" a">
<input type="radio" name="b" value="0" data-value="国家" checked="checked" >国家
<input type="radio" name="b" value="1" data-value="省" >省
<input type="radio" name="b" value="2" data-value="市" >市
<input type="radio" name="b" value="3" data-value="区" >区
<input type="radio" name="b" value="4" data-value="村" >村
<input type="radio" name="b" value="5" data-value="社" >社
</div>
<div class=" select" style="display:none">
</div>
<div class=" ">
<input type="text" id="county" placeholder="请输入" value="" οnchange="radioChange()">
</div>
</div>
</body>
</html><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type=text/javascript>
function radioChange(){
$('.a').find('input[name=b]').each(function(){//从class=a寻找一个name=b的输入框
<!--$(this)：遍历的每一个按钮-->
$(this).change(function(){
<!--_this和$(this)：表当前对象，-->
var _this=$(this);
<!--jquery的addClass通常和removeClass配合使用，-->
_this.addClass('select');//已经选择后改变input的样式
var labels=[];
var radBtn=$('.a').find('input[name=b]')
console.log("*****************",radBtn);
for(var i=0;i<radBtn.length;i++){
if(_this.val()!=$(radBtn[i]).val()){
$(radBtn[i]).removeClass('select')//移除class为select的input的样式
}
if($(radBtn[i]).hasClass('select')){
labels.push($(radBtn[i]).attr('data-value'))//将已经选择好的值放在input框中展示出来
break;
}else{
labels.push($(radBtn[i]).attr('data-value'))
}
console.log("--------------",$(this).val());
creatSel($(this).val(),labels)//动态生成下拉框
}
});
});
}
var options=['1','2','3','4','5','6'];
function creatSel(val,labels){
var selHtml='';
$('.select').children().remove();//移除子项
if(val==0||val=='0'){
$('.select').css({'display':'none'})
return;
}else{
$('.select').css({'display':'block'})
}
for(var i=0;i<parseInt(val);i++){
if(i == 0){ //表示国家是由输入框中输入的结果决定的
selHtml+='<label>'+labels[i]+':</label><select id="sel'+i+'">';
var optHtml='<option value="-1">'+$("#county").val()+'</option>';
selHtml+=optHtml+'</select>';
}
console.log("================",parseInt(val));
selHtml+='<label>'+labels[i]+':</label><select id="sel'+i+'">';
var optHtml='<option value="-1">请选择'+labels[i]+'</option>';
for(var j=0;j<options.length;j++){
optHtml+='<option value="'+j+'">'+options[j]+'</option>';
}
selHtml+=optHtml+'</select>';
}
$('.select').append(selHtml);//动态的将selHtml下拉框链接到 class=select的div中
if(val==5||val=='5'){
$('.a').css({'display':'none'});
}
}
</script>
类似资料：