Question

I have tried to bind those two code ideas together but it isn’t working.

I want to disable the first option from being selectable after a selection has been made.

This is the behavior I’m wanting; the first option is disabled after a selection is made.

And this is my code where I want the first option disabled when a subsequent element is picked.

Answer 1

I believe this answers your inquiry:

http://jsfiddle.net/dq97z/66/

Inside of displayVals I executed the following:

if ($("#menucompare").prop("selectedIndex") !== "0") {
    // Within the select (you could be more specific) find
    // the first (direct descendant) option value and 
    // disable it to make it unselectable
    $("select > option:first").prop("disabled", "disabled")
}

This segment finds out what the selected index of your select menu is and if the user has selected something other than the initial one (0), it sets the first option to be disabled.

Update: http://jsfiddle.net/dq97z/72/

Changed attr() to prop() when disabling per the documentation and @silkster’s advice. Thanks

Also, if you don’t want the option selectable at the beginning, you could even do it without an if statement as seen here.

function displayVals() {
    var singleValues = $("select option:selected").text();
    ....
    $("select > option:first").prop("disabled", "disabled")
}

The disabling happens after the DOM is loaded (with the first one not disabled) so the select can still have ‘Please select’ selected. Whoah…that’s a lot of “select”s.

If you want to leave the if statement there (which means ‘select one’ is selectable until another is actually selected), your if statement would need to be like this:

if ($("#menucompare").prop("selectedIndex") !== 0) // with no quotes around zero