2

我有 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”，我希望只有值“Peach”！

我有一个 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') 仅此而已，而我必须有 alert('Peach') 和 alert('Luigi')

感谢您的帮助和建议，

4

1 回答 1

0

我会用一些不同的方法来做到这一点。检查代码中的注释并尝试理解它。

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/

于 2013-05-29T11:22:55.560 回答