jQuery, 선택 변경시 이벤트

Question

2 개의 체인이있는 선택 : 첫 번째 선택에서 값이 선택되면 두 번째 선택은 첫 번째 선택에 해당하는 일부 값을 표시합니다.

예 : I가 문자/단어를 입력 할 때,이 문자/단어가 모든 값을 보여

<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> 

I 번째에 대한 필터 입력이 선택있다.

모든 입력란에 필터 입력 검색 : 예를 들어 'e'를 입력하면 'Alexia'와 'Peach'가 표시됩니다.!

필터 입력 검색은 첫 번째 선택에서 선택한 값에 해당하는 값 목록에서만 가능합니다. 'Mario'를 선택하고 'e'를 입력하면 값 'Peach'! 이

(는 같은 값/클래스입니다 만이 가진 새로운 목록/옵션을 만들 수) :

나는 일을하지만 난 (쿠키) 선택된 제 값으로 페이지를 다시로드 할 때 단지 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로, 페이지를 다시로드하지 않고 작동하지 않았다 즉 e 경고, 여기 내가 가지고있는 것 : 페이지가 선택된 값으로로드되면 경고 ('1') : 경고 ('Gordon') 및 경고 ('Alexia'); ('Luigi')와 경고 ('Luigi')가 있어야하는 반면, 첫 번째 선택에서 새로운 값을 선택하면 경고 ('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"> 

자바 스크립트 :

$(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/