<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="" onchange="radioChange()">
</div>
</div>
</body>
</html>
js如下：
<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>
