Remove a dropdown value that has been selected from another dropdown menu

Question

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>

score 2 · Accepted Answer · edited Dec 25 '19 at 07:22

2

This will disable it, but not remove it.
Fiddle: http://jsfiddle.net/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.com/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 :)

edited Dec 25 '19 at 07:22

L_J

2,351
10
23
28

answered Apr 27 '14 at 01:41

Andreas Storvik Strauman

1,615
12
29

You shouldn't be using `attr` in this case: http://stackoverflow.com/questions/5874652/prop-vs-attr – Chase Apr 27 '14 at 01:46
We all do =) Just thought I'd point it out so you knew, looks like you took care of it. – Chase Apr 27 '14 at 01:56
@AndreasStorvikStrauman it does work just one problem if you select the value then change it both values are still blocked on the other ones any ideas ? – Jamiex304 Apr 27 '14 at 02:33
@AndreasStorvikStrauman have just noticed a problem when adding this code to my example it does not disable the value selected in pref 1 when u select from pref 3 – Jamiex304 Apr 27 '14 at 16:22
It works on the [fiddle](http://jsfiddle.net/p2SFA/1/). Sure you're implementing it right? Also I did fix the previous problem. – Andreas Storvik Strauman Apr 27 '14 at 19:42
@AndreasStorvikStrauman yes it works in the fiddle but the problem is that in prefence one if you select lets say movie, then change it to tv both are blocked out in the other to dropdowns ?? it is the same in ur fiddle ? – Jamiex304 Apr 28 '14 at 16:32
I know where the error is, and it's not in my code but in the fiddle. http://jsfiddle.net/p2SFA/3/ – Andreas Storvik Strauman Apr 28 '14 at 17:06
Same question is here but i want to add drop-downs dynamically and implement this functionality, please have look http://stackoverflow.com/questions/43006815/how-do-i-remove-and-add-value-in-dynamic-created-dropdown-using-jquery – KuldeeP ChoudharY Mar 25 '17 at 12:58
There is issue with this solution like when you are selecting a value and then change the selected value to other option. This error is already posted by other user. Please check my solution below which is working fine. – Debashis Mar 28 '20 at 08:16

score 1 · Answer 2 · edited Jun 26 '15 at 13:20

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();
            }
        });
    });
});`

score 0 · Answer 3 · edited Dec 25 '19 at 07:42

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.com/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 recommend 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

Naveen Chandra Tiwari · Answer 4 · 2014-04-27T08:02:20.673

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.

Debashis · Answer 5 · 2020-03-28T08:18:51.097

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();
    });
}

Remove a dropdown value that has been selected from another dropdown menu

5 Answers5

Linked