Question

I have 3 drop down (combo boxes) or select lists on a page. It currently gives me the value from the first drop down box.
I am looking for a way to know

1. Which drop down’s value is selected and has submitted value?
2. Disable the other two drop down’s so that only 1 value is selected?

I am using jquery to check the value using this

var id = $("select option:selected").attr("value");

Any suggestions in jQuery to achieve 1 and 2 above?

Demo here http://jsfiddle.net/rd2K4/1/
Thanks.

Answer 1

If I’m understanding your question correctly, the following should work. It handles the change event for all select elements. When one is changed, it disables the others and stores the selected value into a selectedValue variable:

$(function() {
    var selects = $("select");
    selects.on("change", function() {
        var $this = $(this);
        var selectedValue = $this.val();
        selects.not($this).attr("disabled", "disabled");

        // do something with the selectedValue here ...
    });
});

Note: The use of .on() requires jQuery 1.7+

Demo link can be found here: http://jsfiddle.net/QnKGu/