jquery下拉框单方面改变第二个下拉框的默认值

jquery一个下拉框选择了一个值,触发了第二个下拉框的默认值改变,但是若第一个下拉框不是这个值,第二个下拉框就还是默认选第一个值

<div>
	<label>更换</label> 
	<select class="change" name="change">
	    <option value="CB">cb</option>
	    <option value="CK">ck</option>
	    <option value="DK">dk</option>
	</select>
</div>
<div>
    <label>更换记录</label> 
	<select class="changeRecord" name="changeRecord">
	    <option value="1">11</option>
	    <option value="2">22</option>
        <option value="3">33</option>
	    <option value="4">44</option>
	    <option value="5">55</option>
	    <option value="6">66</option>
	    <option value="7">77</option>
    </select>
</div>

$('.change').on('change',function(data) {
			if($(this).val() === 'DK') {
				$(this).find("option[value='DK']").attr("selected",true); 
				$(this).parent().siblings('div').children().find("option[value=6]").attr("selected",true); 
				
				$(this).find("option[value='CB']").attr("selected",false); 
				$(this).find("option[value='CK']").attr("selected",false); 
				$(this).parent().siblings('div').children().find("option[value=1]").attr("selected",false);  
			}
			else if($(this).val() === 'CB') {
				$(this).find("option[value='CB']").attr("selected",true); 
				$(this).parent().siblings('div').children().find("option[value=1]").attr("selected",true); 
				
				$(this).parent().siblings('div').children().find("option[value=6]").attr("selected",false); 
				$(this).find("option[value='CK']").attr("selected",false); 
				$(this).find("option[value='DK']").attr("selected",false);  
			}
			else if($(this).val() === 'CK') {
				$(this).find("option[value='CK']").attr("selected",true); 
				$(this).parent().siblings('div').children().find("option[value=1]").attr("selected",true); 
			 
				$(this).parent().siblings('div').children().find("option[value=6]").attr("selected",false); 
				$(this).find("option[value='DK']").attr("selected",false); 
				$(this).find("option[value='CB']").attr("selected",false);
			}
		})

第一个下拉框的class是change,之所设置这么多selected属性,因为如果不把上一次的属性设置为false的话,下几次若还要选择上次一样的值第二个下拉框就不会跟着第一个下拉框联动了

其实用将jquery对象转换为js对象再利用selected属性可以更轻便:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
		<style type="text/css">
			select {
				width: 160px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div>
	<label>更换</label> 
	<select class="change" name="change">
	    <option value="CB">cb</option>
	    <option value="CK">ck</option>
	    <option value="DK">dk</option>
	</select>
</div>
<div>
    <label>更换记录</label> 
	<select class="changeRecord" name="changeRecord">
	    <option value="1">11</option>
	    <option value="2">22</option>
        <option value="3">33</option>
	    <option value="4">44</option>
	    <option value="5">55</option>
	    <option value="6">66</option>
	    <option value="7">77</option>
    </select>
</div>
	</body>
	<script type="text/javascript">
		$('.change').on('change',function(data) {
			if($(this).val() === 'DK') {
				$(this).find("option[value='DK']")[0].selected = true;
				$(this).parent().siblings('div').children().find("option[value=6]")[0].selected = true;
			}
			else if($(this).val() === 'CB') {
				$(this).find("option[value='CB']")[0].selected = true;
				$(this).parent().siblings('div').children().find("option[value=1]")[0].selected = true;
			}
			else if($(this).val() === 'CK') {
				$(this).find("option[value='CK']")[0].selected = true;
				$(this).parent().siblings('div').children().find("option[value=1]")[0].selected = true;
			}
		})
	</script>
</html>

jquery下拉框单方面改变第二个下拉框的默认值

猜你喜欢