I have 12 drop downs input areas, 1 for each of the months of the year. Each drop down has the choice of the same 24 options.

I need to make it so that, for example, if in the January drop down box you chose option #4, that option #4 cannot be selected in any of the other drop down menus. It would still be in the drop down, but would just be disabled.

This would have an ajax trigger to check the value against the other drop downs and dynamically change the other drop down menus.

Is there a loop I can do to check and disable these values dynamically without having to make a lot of if statements?

I have 12 drop downs input areas, 1 for each of the months of the year. Each drop down has the choice of the same 24 options.

I need to make it so that, for example, if in the January drop down box you chose option #4, that option #4 cannot be selected in any of the other drop down menus. It would still be in the drop down, but would just be disabled.

This would have an ajax trigger to check the value against the other drop downs and dynamically change the other drop down menus.

Is there a loop I can do to check and disable these values dynamically without having to make a lot of if statements?

• javascript
• html
• ajax
• forms
• loops

Share Improve this question Follow asked Oct 30, 2012 at 23:46 NicoleNicole 11533 silver badges1616 bronze badges 1

• You can set a disabled attribute on the options you don’t want the user to select. – David Hellsing Commented Oct 30, 2012 at 23:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You can use jQuery to find the option element in all other dropdowns (in my example, designated by a certain class...and can easily be changed to another selector - I thought the selector "select" was too broad), and then disable the actual option element by using .prop("disabled", true). But it's a little more tricky than this, as you need to keep track of the previous selected value to enable the dropdown again when a different value is chosen. Here's an example that will hopefully help:

http://jsfiddle/p5Arj/

$(document).ready(function () {
    $(".test").each(function () {
        var $self = $(this);
        $self.data("previous_value", $self.val());
    });

    $(".test").on("change", function () {
        var $self = $(this);
        var prev_value = $self.data("previous_value");
        var cur_value = $self.val();

        $(".test").not($self).find("option").filter(function () {
            return $(this).val() == prev_value;
        }).prop("disabled", false);

        if (cur_value != "") {
            $(".test").not($self).find("option").filter(function () {
                return $(this).val() == cur_value;
            }).prop("disabled", true);

            $self.data("previous_value", cur_value);
        }
    });
});

So this disables all other dropdowns' same options when you choose one, and makes sure that when you choose another, the previous one is enabled in all other dropdowns. For example, choose "3" in the first dropdown...look at the second dropdown - see that "3" is disabled...go back to the first dropdown and choose "1"...look at the second dropdown - see that "3" is enabled again but "1" is disabled. That's what the use of .data is for in my code.

Of course, you can replace the use of value with selectedIndex if you are 100% sure that all of the options will be the same for each select in question.

http://jsfiddle/Rk5e9/9/

Only about 10 lines, and no ajax!

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>


Script:
$(document).ready(function(){
    $('.unique-value').focus(function(){
        var val = $(this).val();
        $(this).attr('data-current-value', val); 
    });

    $('.unique-value').change(function(){
        var val = $(this).val();
        if(val != -1)
            $('.unique-value option[value=' + val + ']').attr('disabled', 'disabled'); 

        var oldval = $(this).attr('data-current-value');
        $('.unique-value option[value=' + oldval + ']').removeAttr('disabled'); 
    });        
});​

I think this would be the shortest solution:

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

and the jquery code:

    $(document).on('change', '.select-attendee', function(){
        $current=$(this);
        $(".select-attendee").not($current).children("option[value='"+$current.val()+"']").attr('disabled', "disabled");
    });

Assuming you had a dropdown for each month, and an option for each week.

<select class="month" id="october">
  <option class="week" value="week1">Week One</option>
  <option class="week" value="week2">Week Two</option>
</select>

Lets say you select a week, and you listen for the event.

$(".month").change(function(event) {
   // Get the week just selected.
   var selectedWeek = $(this).children(".week:selected").val();
   // Enabled all weeks before disabling the selected week.
   $("option.week").removeAttr("disabled");
   // Disable all week options matching this selection.
   $("option.week[value="+selectedWeek+"]").attr("disabled", "disabled");
});