Играя с выбирает и JavaScript

Question

Мой код:

<select name='main'> 
    <option>Animals</option> 
    <option>Food</option> 
    <option>Cars</option> 
</select> 

<select name='other'> 
    <option>Rats</option> 
    <option>Cats</option> 
    <option>Oranges</option> 
    <option>Audi</option> 
</select> 

Как я могу фильтровать мой второй <select>, поэтому было бы только показать элементы, которые я хочу, например. если я выбираю Animals, мой выбор был бы:

<select name='other'> 
    <option>Rats</option> 
    <option>Cats</option> 
</select> 

и если я выбираю «Food», мой <select> будет выглядеть так:

<select name='other'> 
    <option>Oranges</option> 
</select> 

Ну, я надеюсь, что вы получите эту идею. Благодарю.

Answer 1

Вы должны были бы создать какой-то ассоциации между выбирает, я рекомендую использовать data-* атрибут:

<select id="main_select" name='main'> 
    <option>Animals</option> 
    <option>Food</option> 
    <option>Cars</option> 
</select> 

<select id="other_select" name='other'> 
    <option data-category="Animals">Rats</option> 
    <option data-category="Animals">Cats</option> 
    <option data-category="Food">Oranges</option> 
    <option data-category="Cars">Audi</option> 
</select> 

После того, как это в месте для всех <option> элементов, код JavaScript будет выглядеть что-то вроде этого:

EDITED, это работает:

$(function() { 
    var cloned = $('#other_select option').clone(); 
    $('#main_select').change(function() { 
     var selectedCategory = $(':selected', this).text(); 
     var filtered = $(cloned).filter("[data-category='" + selectedCategory + "']"); 
     $("#other_select option").replaceWith(filtered); 
    }); 
    $('#main_select').change(); //fire the event initially. 
}); 

jsFiddle example

Answer 2

Вы можете добавить обработчик в change событий в окне выбора main что затем разветвляется на котором был выбран вариант, а затем динамически добавляет опции к other выбора. Далее предполагается, избранная с идентификатором main и ид other:

HTML:

<select name="main" id="main"> 
    <option value="1">Cars</option> 
    <option value="2">Food</option> 
    <option value="3">Animals</option> 
</select> 
<!-- Default the other select to 'cars' --> 
<select name="other" id="other"> 
    <option value="Audi">Audi</option> 
</select> 

JavaScript:

$("#main").bind("change", function() { 
    var categories = $("#other").get(0); 
    categories.options.length = 0; 

    switch (this.value) { 
    case "1": 
      categories.options[0] = new Option("Audi", "Audi"); 
     break; 
    case "2": 
      categories.options[0] = new Option("Oranges", "Oranges"); 
     break; 
    case "3": 
      categories.options[0] = new Option("Rats", "Rats"); 
      categories.options[1] = new Option("Cats", "Cats"); 
     break; 
    } 
}); 

Заканчивать пример здесь: http://jsfiddle.net/andrewwhitaker/nRGC9/

Answer 3

Наивный решение будет :

$('select [name=main]').change(function(){ 
     var other = $('select [name=other] option'); 
     switch($(this).val()){ 
       case 'Animals': 
        other.each(function() { if (!isAnimal($(this).val())) 
                $(this).hide(); 
              else 
                $(this).show(); 
           }); 

//where isAnimal is a function that accepts a string parameter and checks whether its an animal or not 
       break; 
       case 'food': 
        //continue in the same manner...... 
    }});