全部,
我有两个选择,如下所示:
<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>
我想要做的是在第一个下拉列表中选择一个状态,然后删除第二个下拉列表中的所有选项,除了所选状态下列出的选项。
到目前为止,我所做的是从第一个下拉列表中确定选定的状态,然后获取该选项在第二个下拉列表中的位置的索引。我应该如何继续?我正在考虑使用 .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);
});
});
最佳答案
编辑: 更新答案。
我强烈建议使用<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
也有类(class)。
我们甚至可以像这样简化和清理代码:
示例: 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 );
});
});
<小时/>
关于jquery - 删除 jQuery 中的选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6575810/