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'我想只有价值'桃'！

我有一个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'）然后：alert（'Gordon'）和alert（'Alexia'）;但是当我在第一个选择中选择一个新值时：alert（'2'）就是全部，而我必须有警报（'Peach'）和警报（'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/

jQuery，选择更改时的事件

1 个答案: