jQuery，选择更改时的事件

Question

我有 2 个链式选择:当在第一个选择中选择一个值时，第二个选择显示一些与第一个选择相对应的值。

示例:

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

我希望过滤器输入仅在与第一个选择中选择的值相对应的可用值列表中搜索:如果我选择“Mario”并键入“e”，我希望只有“桃子”的值(value)!

我有一个 jQuery 函数，但只有当我重新加载页面并选择第一个值(使用 cookie)时才有效:(它创建一个新的列表/选项，其中只有那些具有相同值/类的列表/选项)

$(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]));
                }
            });    
        });
    });
});

问题是如果不重新加载页面就无法工作，因为当我更改第一个值时，我的新列表保持为空..

编辑:

当我发出警报时，这里有:当页面加载了选定的值时:alert('1') then : alert('Gordon') and alert('Alexia');但是当我在第一个选择中选择一个新值时:alert('2') 仅此而已，而我必须有 alert('Peach') 和 alert('Luigi')

感谢您的帮助和建议，

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/