使用JavaScript完成连动处理:
答案:3 悬赏:80
解决时间 2021-02-08 04:18
- 提问者网友：践踏俘获
- 2021-02-07 07:07
使用JavaScript完成连动处理:
最佳答案
- 二级知识专家网友：桃花别处起长歌
- 2021-02-07 08:22
<html>
<head>
<script type="text/javascript">
var cities = [["北京", "重庆", "上海"], ["奥克兰", "华盛顿"]];
setOption = function() {
var index = document.getElementById("country_select").selectedIndex;
var city = document.getElementById("city_select");
city.options.length = 0;
for (var i = 0; i < cities[index].length; i++) {
var option = document.createElement('option');
option.value = [i];
option.text = cities[index][i];
city.add(option, null);
}
}
</script>
</head>
<body>
<p>
<input id="Radio1" checked="true" name="R1" type="radio" onclick="document.getElementById('selectarea').style.display='block';document.getElementById('inputarea').style.display='none';" />选择
<input id="Radio2" name="R1" type="radio" onclick="document.getElementById('inputarea').style.display='block';document.getElementById('selectarea').style.display='none';" />输入</p>
<div id="selectarea" style="display:block;">
国家：
<select id="country_select" name="D1" onchange="setOption();">
<option value="1">中国</option>
<option value="2">美国</option>
</select>
城市：
<select id="city_select" name="D2">
<option value="1">北京</option>
<option value="2">重庆</option>
<option value="3">上海</option>
</select>
</div>
<div id="inputarea" style="display:none;">
国家：
<input id="country_input" type="text" />
城市：
<input id="city_input" type="text" />
</div>
<br />
</body>
</html>
Google Chrome 下测试通过。输入框和选择框不能互换，因此采用了两组控件，请注意。
<head>
<script type="text/javascript">
var cities = [["北京", "重庆", "上海"], ["奥克兰", "华盛顿"]];
setOption = function() {
var index = document.getElementById("country_select").selectedIndex;
var city = document.getElementById("city_select");
city.options.length = 0;
for (var i = 0; i < cities[index].length; i++) {
var option = document.createElement('option');
option.value = [i];
option.text = cities[index][i];
city.add(option, null);
}
}
</script>
</head>
<body>
<p>
<input id="Radio1" checked="true" name="R1" type="radio" onclick="document.getElementById('selectarea').style.display='block';document.getElementById('inputarea').style.display='none';" />选择
<input id="Radio2" name="R1" type="radio" onclick="document.getElementById('inputarea').style.display='block';document.getElementById('selectarea').style.display='none';" />输入</p>
<div id="selectarea" style="display:block;">
国家：
<select id="country_select" name="D1" onchange="setOption();">
<option value="1">中国</option>
<option value="2">美国</option>
</select>
城市：
<select id="city_select" name="D2">
<option value="1">北京</option>
<option value="2">重庆</option>
<option value="3">上海</option>
</select>
</div>
<div id="inputarea" style="display:none;">
国家：
<input id="country_input" type="text" />
城市：
<input id="city_input" type="text" />
</div>
<br />
</body>
</html>
Google Chrome 下测试通过。输入框和选择框不能互换，因此采用了两组控件，请注意。
全部回答
- 1楼网友：而你却相形见绌
- 2021-02-07 10:52
这个现在都有现成的框架方法，都不用自己写了，直接调用。需要给你，留方式
- 2楼网友：留下所有热言
- 2021-02-07 09:22
找个js框架吧，比如jquery、dojo里面有现成的下拉列表控件可以实现联动，看看原理就知道啦
我要举报
如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
大家都在看
推荐资讯