jQuery, событие при изменении выбора

Question

У меня есть 2 привязанных select: когда значение выбирается в первом, второе выбирает отображение некоторых значений, соответствующих первому выбору.

Пример:

<select id='first_select'> 
<option value='1' class='1'> Half Life </option> 
<option value='2' class='2'> Mario </option> 
</select> 

<select id='second_select'> 
<option class='1'> Gordon </option> 
<option class='1'> Alexia </option> 
<option class='2'> Peach </option> 
<option class='2'> Luigi </option> 
</select> 

У меня есть входной фильтр для второго выбора: при вводе буквы/слова, это показывают все значения, которые имеют эту букву/слово.

Поиск входного сигнала фильтра во ВСЕХ ЦЕННОСТЯХ: Например, если я вхожу в 'e', ​​он вернет 'Alexia' и 'Peach'!

Я хотел бы, чтобы вход фильтра включался только в список доступных значений, соответствующих значению, выбранному при первом выборе: Если я выберем «Марио», и я напечатаю «e», я хотел бы иметь только значение «Персик»!

У меня есть функция JQuery, который работает, но только тогда, когда я перезагрузить страницу с первым выбранным значением (с куки): (это создать новый список/вариант с только этим, что один и тем же значением/класс)

$(document).ready(function() { 

$('#first_select').change(function(){ 
     var identif = jQuery('#first_select option:selected').attr('class'); 
     // alert(identif); 
     var opts = $('#second_select option[class^='+identif +']').map(function(){ 
     // alert(this.value); 
      return [[this.value, $(this).text()]]; 
     }); 

     $('#someinput').keyup(function(){ 
      var rxp = new RegExp($('#someinput ').val(), 'i'); 
      var optlist = $('#second_select').empty(); 

      opts.each(function(){ 
       if (rxp.test(this[1])) { 
       optlist.append($('<option />').attr('value', this[0]).text(this[1])); 
       } 
      });  
     }); 
    }); 
}); 

Проблема заключается в том, что не работает без перезагрузки страницы, а SOOS, как изменить первое значение, мой новый список оставался пустым ..

EDIT:

Когда я поставил сом e alert, вот что у меня есть: Когда страница загружается с выбранным значением: alert ('1'), тогда: alert ('Gordon') и alert ('Alexia'); но когда я выбираю новое значение в первом select: alert ('2'), и это все, в то время как у меня должно быть предупреждение («Персик») и предупреждение («Луиджи»)

Спасибо за вашу помощь и советы,

Answer 1

Я бы сделал это с небольшим разным подходом. Проверьте комментарии в коде и попытайтесь понять это.

HTML:

<select id="game_select"> 
    <option value="1"> Half Life </option> 
    <option value="2"> Mario </option> 
</select> 

<select id="character_select"> 
    <option data-game="1"> Gordon </option> 
    <option data-game="1"> Alexia </option> 
    <option data-game="2"> Peach </option> 
    <option data-game="2"> Luigi </option> 
</select> 

<input id="character_filter" type="text"> 

JavaScript:

$(function() { 

    function show_game_characters(game_id) { 

     // hide all options 
     $('#character_select option').hide() 

     // set options for this game visible 
     $('#character_select option[data-game=' + $('#game_select').val() + ']').show() 

     // select first option of all visible options 
     $('#character_select option:visible:first').prop('selected', true) 
    } 

    function filter(search) { 

     // hide all that don't match the search 
     $('#character_select option:visible').each(function() { 
      if(!$(this).html().match(search)) { 
       $(this).hide(); 
      } 
     }) 

     // select first option of all visible options 
     $('#character_select option:visible:first').prop('selected', true) 

    } 

    $('#game_select').on('change', function() { 
     // when game select changes, filter the character list to the selected game 
     show_game_characters()    
    }) 

    $('#character_filter').on('keyup', function() { 

     // when user filters using the filter input 

     // first show characters for selected game    
     show_game_characters()    

     // then filter 
     filter($(this).val()) 

    }) 

}) 

jsfiddle: http://jsfiddle.net/JKw3D/3/