所有
我有两个看起来像这样的选择：
<select name='input_34' id='input_1_34' class='small gfield_select' tabindex='1' >
<option value='29' >Alabama</option>
<option value='34' >Alaska</option>
<option value='42' >Arizona</option>
....
<select name='input_13' id='input_13' class='small gfield_select' tabindex="2">
<option value='-1' selected='selected'>Select a base</option>
<option class="level-0" value="29">Alabama</option>
<option class="level-1" value="30"> Anniston Army Depot</option>
<option class="level-1" value="333"> Fort Rucker</option>
<option class="level-1" value="32"> Maxwell-Gunter AFB</option>
<option class="level-1" value="33"> Redstone Arsenal</option>
<option class="level-0" value="34">Alaska</option>
<option class="level-1" value="35"> Eielson AFB</option>
<option class="level-1" value="36"> Elmendorf AFB</option>
<option class="level-1" value="37"> Fort Greely</option>
<option class="level-1" value="38"> Fort Richardson</option>
<option class="level-1" value="39"> Fort Wainwright</option>
<option class="level-1" value="40"> USCG ISC Kodiak</option>
<option class="level-1" value="41"> USCG Juneau</option>
<option class="level-1" value="42"> USCG Ketchikan</option>
<option class="level-0" value="43">Arizona</option>
我想要做的是在第一个dropwown中选择一个状态，然后删除第二个下拉列表中的所有选项，除了在所选状态下列出的那些选项。
到目前为止我所做的是从第一个下拉列表中确定所选状态，然后获取该选项在第二个下拉列表中的位置的索引。我该怎么办？我正在考虑使用.next（）来通过类.level-1的每个选项，停在.level-0。一旦我有了，我可以使用.remove（）删除除那些之外的所有其他选项。
到目前为止，这是我的代码：
jQuery(document).ready(function(){
jQuery('#input_1_34').bind('change', function()
{
//get selected value from drop down
var selectedValue = jQuery("#input_1_34").val();
//hide everything but bases for the selected state
//jQuery("#input_13 option[value=" + selectedValue + "]").next().remove();
selectedIndex = jQuery("#input_13 option[value=" + selectedValue + "]").index();
alert (selectedIndex);
});
});
答案 0 :(得分：6)
编辑： 更新了答案。
我强烈建议使用<optgroup>元素对每个州的基数进行分组。
这样您就不需要所有 来创建缩进，并且当您将状态设置为label时，它会给出漂亮的外观。
<select name='input_13' id='input_13' class='small gfield_select' tabindex="2">
<option value='-1' selected='selected'>Select a base</option>
<optgroup class="level-0" value='29' label="Alabama">
<option class="level-1" value="30">Anniston Army Depot</option>
<option class="level-1" value="333">Fort Rucker</option>
<option class="level-1" value="32">Maxwell-Gunter AFB</option>
<option class="level-1" value="33">Redstone Arsenal</option>
</optgroup>
<optgroup class="level-0" value="34" label="Alaska">
<option class="level-1" value="35">Eielson AFB</option>
<option class="level-1" value="36">Elmendorf AFB</option>
<option class="level-1" value="37">Fort Greely</option>
<option class="level-1" value="38">Fort Richardson</option>
<option class="level-1" value="39">Fort Wainwright</option>
<option class="level-1" value="40">USCG ISC Kodiak</option>
<option class="level-1" value="41">USCG Juneau</option>
<option class="level-1" value="42">USCG Ketchikan</option>
</optgroup>
<optgroup class="level-0" value="43" label="Arizona">
<option class="level-1" value="44">USCG whatever</option>
<option class="level-1" value="45">USCG whatever</option>
</optgroup>
</select>
它还可以简化您的代码，因为您可以选择optgroup的所有子代。
示例： http://jsfiddle.net/asBSU/3/
jQuery(document).ready(function() {
var clone_select = $('#input_13').clone();
jQuery('#input_1_34').bind('change', function() {
var selectedValue = jQuery("#input_1_34").val();
var clone_subset = clone_select
.find('optgroup[value="' + selectedValue + '"] > option')
.clone();
$('#input_13').empty().append(clone_subset);
});
});
我想你也可以摆脱所有level-n课程。
我们甚至可以更简化和清理代码：
示例： http://jsfiddle.net/asBSU/4/
jQuery(document).ready(function() {
var clone_groups = $('#input_13 > optgroup').clone();
jQuery('#input_1_34').bind('change', function() {
clone_groups.eq( this.selectedIndex )
.children()
.clone()
.appendTo( $('#input_13').empty() );
});
});
这是因为第一个<option>中每个<select>的索引将与克隆的<optgroup>中所需<select>的索引相对应。
原始回答：
使用clone()[docs]方法将克隆保留为包含长列表的整个<select>。
从第一个中选择值时，请执行以下操作：
使用find()[docs]方法获取选项
filter()[docs]方法，用于过滤到匹配值的状态，
nextUntil()[docs]方法获取所有后续选项，直到找到'level-0'，
再次clone()[docs]方法进行克隆。
然后从页面上的选择中，使用：
清除选项的empty()[docs]方法，
append()[docs]方法追加刚刚克隆的方法。
示例： http://jsfiddle.net/XrFr7/2/
jQuery(document).ready(function(){
var clone_select = $('#input_13').clone();
jQuery('#input_1_34').bind('change', function() {
var selectedValue = jQuery("#input_1_34").val();
var clone_subset = clone_select.find('option')
.filter('[value="' + selectedValue + '"]')
.nextUntil('.level-0')
.clone();
$('#input_13').empty().append( clone_subset );
});
});
答案 1 :(得分：1)
您可以使用nextUntil（）并执行以下操作：
var allOptions = $("#input_13 option");
jQuery('#input_1_34').bind('change', function() {
//get selected value from drop down
var selectedValue = jQuery("#input_1_34").val();
$('#input_13').html('').append(allOptions);
selectedOptions = $("#input_13 option[value=" + selectedValue + "]").nextUntil('.level-0').andSelf();
$('#input_13').html('').append(selectedOptions);
});
编辑 - 我更改了答案以允许用户选择更多选项
请看这里的小提琴：http://jsfiddle.net/QGCh4/2/
答案 2 :(得分：0)
我同意kinakuta，你这太难了。如果你真的想使用这个流程，你可以尝试类似的东西：
jQuery(document).ready(function() {
jQuery('#input_1_34').bind('change', function() {
//get selected value from drop down
var selectedValue = jQuery("#input_1_34").val();
var removing = true;
jQuery('#input_13 option').each(function() {
if (jQuery(this).hasClass('level-0')) {
removing = !(jQuery(this).val() == selectedValue);
}
if (removing) {
jQuery(this).hide();
} else {
jQuery(this).show();
}
});
});
});
通过所有元素循环，并隐藏/显示它们。如果删除元素，则必须重新填充数组。