Javascript javascript根据其他下拉列表更改下拉值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5990552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript Change the Dropdown values based on other dropdown
提问by Jam
I have a requirement When selected a dropdown value, it has to filter or remove the values of other dropdown which has index that should be always greater than selected index of first dropdown.
I have a requirement When selected a dropdown value, it has to filter or remove the values of other dropdown which has index that should be always greater than selected index of first dropdown.
Ex: First Dropdown values:
例如： 第一个下拉值：
01:00
01:30
02:00 // suppose i select 02:00 here
02:30
03:00
03:30
04:00
04:30
05:00
05:30
Second Dropdonw Values(on selected 02:00 in the above dropdown should look like below)
第二个 Dropdonw 值（在上面的下拉列表中选择的 02:00 应该如下所示）
02:30
03:00
03:30
04:00
04:30
05:00
05:30
(Im using C# with Asp.net here.)
（我在这里使用 C# 和 Asp.net。）
Any javascript to achieve above would be greatly appreciated
任何要实现上述目标的 javascript 将不胜感激
and using script as below as Salman Suggested
并使用如下脚本作为 Salman 建议
<body onload="select()">
<script language="javascript">
function select(){
var select1 = document.getElementById("ddlFrom");
var select2 = document.getElementById("ddlTo");
select1.onchange = function filterDDL() { // empty select2
while (select2.firstChild) {
select2.removeChild(select2.firstChild);
}
if (select1.selectedIndex == 0)
{
return;
}
for (var i = select1.selectedIndex; i < select1.options.length; i++)
{
var o = document.createElement("option");
o.value = select1.options[i].value;
o.text = select1.options[i].text;
select2.appendChild(o);
}
}
}</script>
but not working...please help on this Thanks in advance
但不工作......请帮忙解决这个提前谢谢
采纳答案by Craig
Edit (using jQuery to get desired results):
编辑（使用 jQuery 获得想要的结果）：
<select id="one">
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
</select>
<select id="two"></select>
<script type="text/javascript">
$(function () {
$("#one").change(function (e) {
$("#two").empty();
var options =
$("#one option").filter(function(e){
return $(this).attr("value") > $("#one option:selected").val();
}).clone();
$("#two").append(options);
});
});
</script>
回答by Salman A
Vanilla JavaScript solution and demo.
Vanilla JavaScript 解决方案和演示。
HTML
HTML
<select name="select1" id="select1">
<option value="">-- select an option --</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
</select>
<select name="select2" id="select2">
</select>
JavaScript
JavaScript
// this function must be wrapped inside onload event
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
select1.onchange = function() {
// empty select2
while (select2.firstChild) {
select2.removeChild(select2.firstChild);
}
if (select1.selectedIndex == 0) {
return;
}
for (var i = select1.selectedIndex; i < select1.options.length; i++) {
var o = document.createElement("option");
o.value = select1.options[i].value;
o.text = select1.options[i].text;
select2.appendChild(o);
}
}
回答by mingos
There are multiple ways to achieve this, each might be good for a different useage.
有多种方法可以实现这一点，每种方法可能适用于不同的用途。
Filter by value
按值过滤
@Craig has suggested it already. Give the dropdown options values. When something's selected in the first one, values lower or equal to its value are removed from the second dropdown: http://jsfiddle.net/q8mLH/
@Craig 已经建议了。给出下拉选项值。当在第一个中选择某些内容时，低于或等于其值的值将从第二个下拉列表中删除：http: //jsfiddle.net/q8mLH/
Using an array of available pairs
使用可用对的数组
Create an array of the pairs you're interested in, then when select 1 is changed, update select2 available options based on what is defined in your array of allowed pairs: http://jsfiddle.net/AU6hq/
创建您感兴趣的对的数组，然后在更改选择 1 时，根据允许对的数组中定义的内容更新 select2 可用选项：http: //jsfiddle.net/AU6hq/
AJAX + database pairs
AJAX + 数据库对
I'm not going to specify an example here, sorry, but the general idea is this: you need to have some tables in your database, let's say "countries" and "cities", where each country has an ID, and each city has its own unique ID plus the ID of the country where it lies. You'll want to display only the cities in the selected country, probably.
我不打算在这里指定一个例子，抱歉，但总体思路是这样的：你的数据库中需要有一些表，比如说“国家”和“城市”，每个国家都有一个 ID，每个城市拥有自己的唯一 ID 加上所在国家/地区的 ID。您可能只想显示所选国家/地区的城市。
You bind the change() event to the counties select and load the contents of the second select via an ajax call, querying the database for the cities that lie in the selected country.
您将 change() 事件绑定到县选择并通过 ajax 调用加载第二个选择的内容，查询位于所选国家/地区的城市的数据库。
There might be more, but I don't quite feel like thinking too much today ;). Anyway, I hope this helps.
可能还有更多，但我今天不想想太多；)。无论如何，我希望这会有所帮助。
[EDIT]
[编辑]
My examples use jQuery, I hope it's not a problem.
我的示例使用 jQuery，我希望这不是问题。
