current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have 2 chained select : when a value is choose in the first one, the second select show some values that correspond to the first select.

Example :

<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 have a filter input for the second select : when I type a letter/word, it show all values that have this letter/word.

The filter input search in ALL VALUES : For example, if I enter 'e' it will return 'Alexia' and 'Peach' !

I would like that the filter input search only in the list of values available that correspond to the value selected in the first select : If I select 'Mario' and I type 'e' I would like to have only the value 'Peach' !

I have a jQuery function which work but only when I reload the page with a first value selected (with cookie): (it create a new list/option with only these that are the same value/class)

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

Problem is that didn't work without reload the page, as soos as I change the first value, my new list stay empty..

EDIT :

When I put some alert, here what I have : When the page is load with a selected value : alert('1') then : alert('Gordon') and alert('Alexia'); but when I select a new value in the first select : alert('2') and that's all, whereas I must have alert('Peach') and alert('Luigi')

Thanks for your help and advices,

share|improve this question
    
$('#first_input') should be $('#first_select') –  Amit Agrawal May 29 '13 at 9:08
    
See at jQuery UI MultiSelect Widget –  li-on May 29 '13 at 9:09
2  
You've put a jquery listener INSIDE another listener. You better put the $('#someinput').keyup listener outside the $('#first_input').change. You can change a boolean value inside the $('#first_input').change and check that one inside $('#someinput').keyup. Maybe this solves your problem too, I don't know, just fix this first maybe. Because each time the first listener gets called the second one is re-defined, that's not good. –  rednaw May 29 '13 at 9:09
    
you're right Amit Agrawal I have bad copied the original code, li-on I will check that right now ! @rednaw but that's what I want, re-define my list each time that a new first value is choose in order to search only in this new list ? –  Kib' May 29 '13 at 9:22
add comment

1 Answer

up vote 0 down vote accepted

I would do it with a little different approach. Check the comments in the code and try to understand it.

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/

share|improve this answer
    
many thanks for your time !! –  Kib' May 29 '13 at 14:48
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.