jQuery-通过option切换控制另一options状态

2018/10/8

场景：两个options下拉框，当切换第一个下拉框中的options时，控制第二个下拉框属性的状态。

<label class="col-md-5 control-label">**类型：</label>
	<div class="col-md-6 ">
		<select class="form-control form-control-static" id="type" name="type">
				<option selected>请选择</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
		</select>
	</div>

<label class="col-md-5">**属性：</label>
		<div class="col-md-6">
			<select class="form-control form-control-static" id="prop" name="prop">
				<option value="0">请选择</option>
				<option value="1">2-1</option>
				<option value="2">2-2</option>
				<option value="3">2-3</option>
				<option value="4">2-4</option>
			</select>
		</div>

此时，type下拉框选择2时，prop下拉框才可选择，反之禁用。

function add(){
	$.ajax({
		url:'       ',
		dataType:'json',
		type:'post',
		success:function(data){
			$("#type").empty()
			var type1=new Array('请选择','1','2','3','4')
			for(var num=0; type1.length>num; num++){			//判断
				if(data.msg.type==type1[num]){
					$("#type").append("<option selected='selected' value='"+type1[num]+"'>"+type1[num]+"</option>");
				}else{
					$("#type").append("<option value='"+type1[num]+"'>"+type1[num]+"</option>");
				}
			}
			//当value="2"时，进入添加页面加载完类型默认禁用属性
			if($("#type").val()!='2'){
				$("#prop").attr("disabled","disabled");
			}else{
				$("#prop").removeAttr("disabled");
			};	
		},
		error:function(){
			alert("请求失败！");
		}
	});
	
	//当类型改变时禁用属性
	$("#type").on("change",function(){
		if($("#type").val()!='2'){
			$("#prop").attr("disabled","disabled");
		}else{
			$("#prop").removeAttr("disabled");
		};
	});
}