I have searching the web for a while and still I cant find an answer, I have three drop-down menus on my site.

I use them for accepting user preferences so the user can control the output of results.

So I want to know if its possible for the value to be taken out of the other 2 dropdowns if its selected in one.

for example if the user selects movies in the first one it wont be in the others.

here is my dropdowns

<select id="pref1select">
<option value="P">Preference One</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref2select">
<option value="P">Preference Two</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref3select">
<option value="P">Preference Three</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

I have searching the web for a while and still I cant find an answer, I have three drop-down menus on my site.

I use them for accepting user preferences so the user can control the output of results.

So I want to know if its possible for the value to be taken out of the other 2 dropdowns if its selected in one.

for example if the user selects movies in the first one it wont be in the others.

here is my dropdowns

<select id="pref1select">
<option value="P">Preference One</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref2select">
<option value="P">Preference Two</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref3select">
<option value="P">Preference Three</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

• javascript
• jquery
• html
• css
• drop-down-menu

5 Answers 5

This will disable it, but not remove it.
Fiddle: http://jsfiddle/p2SFA/1/

HTML: (Added .preferenceSelect class) and jQuery:

 $(document).ready(function() {
        $(".preferenceSelect").change(function() {
            // Get the selected value
            var selected = $("option:selected", $(this)).val();
            // Get the ID of this element
            var thisID = $(this).prop("id");
            // Reset so all values are showing:
            $(".preferenceSelect option").each(function() {
                $(this).prop("disabled", false);
            });
            $(".preferenceSelect").each(function() {
                if ($(this).prop("id") != thisID) {
                    $("option[value='" + selected + "']", $(this)).prop("disabled", true);
                }
            });

        });
    });

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<select id="pref1select" class="preferenceSelect">
	    <option value="P">Preference One</option>
	    <option value="M">Movie</option>
	    <option value="T">Tv</option>
	    <option value="G">Games</option>
	</select>
	<select id="pref2select" class="preferenceSelect">
	    <option value="P">Preference Two</option>
	    <option value="M">Movie</option>
	    <option value="T">Tv</option>
	    <option value="G">Games</option>
	</select>
	<select id="pref3select" class="preferenceSelect">
	    <option value="P">Preference Three</option>
	    <option value="M">Movie</option>
	    <option value="T">Tv</option>
	    <option value="G">Games</option>
	</select>

If you want it removed, you will probably have to make jQuery know what to insert when it has reset because a new choice is made :)

This should work for you:

$(document).ready(function() {
    $(".preferenceSelect").change(function() {
        // Get the selected value
        var selected = $("option:selected", $(this)).val();
        // Get the ID of this element
        var thisID = $(this).attr("id");
        // Reset so all values are showing:
        $(".preferenceSelect option").each(function() {
            $(this).show();
        });
        $(".preferenceSelect").each(function() {
            if ($(this).attr("id") != thisID) {
                $("option[value='" + selected + "']", $(this)).hide();
            }
        });
    });
});`

You should try this:

  $(".preferenceSelect").on("change", function () {
            $(".preferenceSelect option").prop("disabled", false);
            var selectPref = $("option:selected", $(this)).val();
            var selectId = $(this).prop("id");
            $(".preferenceSelect option").each(function () {
                $(this).show();
            });
            $(".preferenceSelect").each(function () {
                if ($(this).prop("id") != selectId) {
                    $("option[value='" + selectPref + "']", $(this)).prop("disabled", true);
                }
            });

        });

This must be work for you.

I believe something like this would do the trick given the HTML above:

var $selects = $("select");

$selects.on("change", function(){
    var value = this.value;

    $("option[value='" + value +"']", $selects).prop("disabled", true);    
});

var $selects = $("select");

$selects.on("change", function(){
    var value = this.value;
    
    $("option[value='" + value +"']", $selects).prop("disabled", true);    
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="pref1select">
<option value="P">Preference One</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref2select">
<option value="P">Preference Two</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref3select">
<option value="P">Preference Three</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

This disables the duplicate options, but it's an easy change to remove them as well. You'll run into a slight issue, though, since the "Preference #" options all have the same value. I would remend either making these optgroup labels or removing the values entirely and marking them as disabled from the start...since you shouldn't be able to click them in the first place. You can find a bit more on option labels, and separators answered here.

Example

Please try the following which is working fine with no issue. I am also marking the selected option as disable instead of hiding from the other dropdowns.

$( function() {
    courC();
});

function courC(){   
    var previous;

    $(".pSel").on('focus', function () {
        previous = this.value; 
    }).change(function() {
        var selected = $("option:selected", $(this)).val();
        var thisID = $(this).attr("id");

        $(".pSel option").each(function() {
            $(this).show();
        });

        $(".pSel").each(function() {
            var otid=$(this).attr("id");
            if (otid != thisID) {
                if( $('#'+otid).val() == selected){ $('#'+otid).val(''); } // this is required when you are viewing data once again after the form submission
                $("option[value='" + selected + "']", $(this)).attr("disabled", true);
            }

            $("option[value='" + previous + "']", $(this) ).attr("disabled", false); // this will help to reset the previously selected option from all dropdown

        });

        previous =  $('#'+thisID).val();
    });
}