jQuery，选择更改时的事件答案

【问题标题】：jQuery, Event when a select changejQuery，选择更改时的事件
【发布时间】：2013-05-24 11:12:29
【问题描述】：

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

我有一个用于第二个选择的过滤器输入：当我输入一个字母/单词时，它会显示所有包含该字母/单词的值。

过滤器输入在 ALL VALUES 中搜索：例如，如果我输入 'e'，它将返回 'Alexia' 和 'Peach'！

我希望过滤器输入仅在与第一次选择中选择的值相对应的可用值列表中搜索：如果我选择“Mario”并输入“e”，我只想值“桃子”！

我有一个 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') 和 alert('Alexia');但是当我在第一个选择中选择一个新值时：alert('2') 仅此而已，而我必须有 alert('Peach') 和 alert('Luigi')

感谢您的帮助和建议，

【问题讨论】：

$('#first_input') 应该是 $('#first_select')
查看 jQuery UI 多选小部件
您已将一个 jquery 侦听器放在另一个侦听器中。您最好将$('#someinput').keyup 监听器放在$('#first_input').change 之外。您可以更改 $('#first_input').change 内的布尔值并检查 $('#someinput').keyup 内的布尔值。也许这也解决了你的问题，我不知道，也许先解决这个问题。因为每次调用第一个侦听器时，都会重新定义第二个侦听器，这并不好。
你是对的 Amit Agrawal 我复制了原始代码错误，我现在就检查一下！ @rednaw 但这就是我想要的，每次选择新的第一个值时重新定义我的列表以便仅在这个新列表中搜索？

标签： jquery html function select

【解决方案1】：

我会用一些不同的方法来做。检查代码中的cmets并尝试理解。

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/

【讨论】：