Удалить выбранные опции в jQuery

Question

All

У меня есть два выбора, которые выглядят так:

<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">&nbsp;&nbsp;&nbsp;Anniston Army Depot</option> 
<option class="level-1" value="333">&nbsp;&nbsp;&nbsp;Fort Rucker</option> 
<option class="level-1" value="32">&nbsp;&nbsp;&nbsp;Maxwell-Gunter AFB</option> 
<option class="level-1" value="33">&nbsp;&nbsp;&nbsp;Redstone Arsenal</option> 
<option class="level-0" value="34">Alaska</option> 
<option class="level-1" value="35">&nbsp;&nbsp;&nbsp;Eielson AFB</option> 
<option class="level-1" value="36">&nbsp;&nbsp;&nbsp;Elmendorf AFB</option> 
<option class="level-1" value="37">&nbsp;&nbsp;&nbsp;Fort Greely</option> 
<option class="level-1" value="38">&nbsp;&nbsp;&nbsp;Fort Richardson</option> 
<option class="level-1" value="39">&nbsp;&nbsp;&nbsp;Fort Wainwright</option> 
<option class="level-1" value="40">&nbsp;&nbsp;&nbsp;USCG ISC Kodiak</option> 
<option class="level-1" value="41">&nbsp;&nbsp;&nbsp;USCG Juneau</option> 
<option class="level-1" value="42">&nbsp;&nbsp;&nbsp;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); 
        });
});

Answer 1

РЕДАКТИРОВАТЬ: Обновленный ответ.

Я бы настоятельно рекомендовал использовать элементы <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() ^{[документы]} , чтобы получить параметры,

• метод filter() ^{[документы]} для фильтрации до состояния с соответствующим значением,

• метод nextUntil() ^{[документы]} , чтобы получить все последующие опции до , вы найдете один с 'level-0',

• метод clone() ^{[документы]} снова для создания клона.

Затем из списка, который находится на странице, используйте:

• метод empty() ^{[документы]} способ очистки параметров

• метод append() ^{[документы]} для добавления тех, кого вы только что клонировали.

Пример: 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 );
        });
});

---

Answer 2

Вы можете использовать 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/

Answer 3

Я согласен с 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();
            }
        });
    });
});

, который зацикливает все элементы и скрывает / показывает их.Если вы удалите элементы, вы должны заново заполнить массив.