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");
		};
	});
}