所有,
我有两个看起来像这样的选择：
<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);
});
});
解决方法
编辑：更新的答案.
我强烈建议使用< optgroup>在每个州分组基地的要素.
这样你就不需要所有& nbsp;创建缩进,当您将状态设置为标签时,它会给出漂亮的外观.
<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);
});
});
我想你也可以摆脱所有那些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() );
});
});
这是因为每个<选项>的索引.在第一个< 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 );
});
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
