动态生成下拉框

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

猜你喜欢