CODEWITHSUNDEEP
jquery
LouieV
LouieV

Reputation: 1052

updating selects with jquery

I made a quick fiddle (doesnt work) that kinda illustrates what I have. I have a set of selects and the possibility to add more. Now, these get populated dynamically based on an array of objects. What I want to do is that my selects dont use the same options if one is used. For instance select-1 has options 1-2-3-5 as select-2, but when the user selects one option that option needs to disappear on the other selects as well as the ones that got dynamically created. These should also be reversible. thanks for all your help.fiddle

Upvotes: 0

Views: 69

Answers (1)

Plynx
Plynx

Reputation: 11461

I simplified this code somewhat using selectors.

Here you only need to have one event, and you can use a comma in your selector (or another multiple-match selector) that hits everything you want:

    $('#xAxis,#yAxis').on('change',function(){
        setControls();
        $('#main-controls select')
          .each(function()
          {
               $('#main-controls select')
                 .not($(this))
                 .find('option[value=' + $(this).val() +']')
                 .remove();
          });
    });

The strategy is to set up the controls, then find any other controls that have what we just selected. This would be a lot easier if we could hide() options, but unfortunately that doesn't work cross-browser; we have to remove() them.

In setControls the modification is to only add the options to selects that don't already have the option. Then we can call it whenever we want to restore the selects to their original choices (without losing current selections).

    function setControls(){
        $.each(series,function(k,v){
            $('#xAxis,#yAxis')
              .filter(':not(:has(option[value=' + k +']))')
              .append($('<option>')
              .attr({value: k})
              .text(v.name));
        });   
    }

http://jsfiddle.net/5YhpW/8/

Upvotes: 1

Related Questions