单选按钮radio选择，下拉框select联动_单选框和下拉框联动-CSDN博客

本文链接：https://blog.csdn.net/weixin_42813606/article/details/89381220

写了一个简单的页面，实际中我的 radio是在js中Ajax返回数据循环生成的，但是原理是这样的
功能： 点击radio，下面的下拉菜单跟着联动，如点击曹操下拉菜单自动变成魏国，点击张飞的radio 下面自动变成蜀国
在这里插入图片描述

直接上代码

<html>
<head>
<title>radio 和 select 联动</title>
<script>
//点击radio进去函数
function operation(val) {
	
	var radioValue = val.value;

	if (radioValue == 1) {		//曹操
		var sel = document.getElementById('national');
		sel.options[0].text = "魏国";
	}else if (radioValue == 2) {//刘备
		var sel = document.getElementById('national');
		sel.options[0].text = "蜀国";
	}else if (radioValue == 3) {//孙权
		var sel = document.getElementById('national');
		sel.options[0].text = "吴国";
	}else if (radioValue == 4) {//张飞
		var sel = document.getElementById('national');
		sel.options[0].text = "蜀国";
	}else if (radioValue == 5) {//周瑜
		var sel = document.getElementById('national');
		sel.options[0].text = "吴国";
	}else if (radioValue == 6) {//夏侯惇
		var sel = document.getElementById('national');
		sel.options[0].text = "魏国";
	}
}


</script>
</head>

<body>
		<!-- radio -->
		<div >
				  <label >
				    <input id="a" type="radio" name="mt" value="1" "operation(this);">
					曹操
				  </label>
				  <label for="b" class="mwriw_d_r">
				    <input id="b" type="radio" name="mt" value="2" "operation(this);">
					刘备
				  </label>
				  <label for="c" class="mwriw_d_r">
				    <input id="c" type="radio" name="mt" value="3" "operation(this);">
					孙权
				  </label>
				  <label for="d" class="mwriw_d_r">
				    <input id="d" type="radio" name="mt" value="4" "operation(this);">
					张飞
				  </label>
				  <label for="e" class="mwriw_d_r">
				    <input id="e" type="radio" name="mt" value="5" "operation(this);">
					周瑜
				  </label>
				  <label for="f" class="mwriw_d_r">
				    <input id="f" type="radio" name="mt" value="6" "operation(this);">
					夏侯惇
				  </label>
		</div>
		<br/><br/><br/><br/><br/><br/>
		<!-- select  -->
		<div >
				<select  id="national" name="national">
					<option value="蜀国" selected="selected">蜀国</option>
					<option value="魏国" >魏国</option>
					<option value="吴国" >魏国</option>

				</select>
		</div> 
</body>
<html>