Eliminate a selected option from one dropdown menu that corresponds to another dropdown menu

Question

Eliminate a selected option from one dropdown menu that corresponds to another dropdown menu

I have been scouring the internet for a while now, but I still haven't found an answer. On my website, I have three dropdown menus.

These dropdowns are used for gathering user preferences so that users can control the output of results.

I am wondering if it is possible for a value to be removed from the other two dropdowns if it is selected in one.

For example, if the user selects "movies" in the first dropdown, it should not appear in the others.

Here are 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

Answer 1

Answer №1

Disabling the feature without removing it is possible.
Example: http://jsfiddle.net/p2SFA/1/

Modifying HTML by adding the .preferenceSelect class and using 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 wish to completely remove it, consider informing jQuery on what to add after resetting due to a new choice being made :)

Answer 2

Disabling the feature without removing it is possible.
Example: http://jsfiddle.net/p2SFA/1/

Modifying HTML by adding the .preferenceSelect class and using 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 wish to completely remove it, consider informing jQuery on what to add after resetting due to a new choice being made :)

Answer 3

Answer №2

Try using this code snippet for your specific needs:

$(document).ready(function() {
    $(".filter").change(function() {
        // Retrieve the selected value
        var choice = $("option:selected", $(this)).val();
        // Get the ID of the current element
        var elementID = $(this).attr("id");
        // Reset to display all values:
        $(".filter option").each(function() {
            $(this).show();
        });
        $(".filter").each(function() {
            if ($(this).attr("id") != elementID) {
                $("option[value='" + choice + "']", $(this)).hide();
            }
        });
    });
});`

Answer 4

Try using this code snippet for your specific needs:

$(document).ready(function() {
    $(".filter").change(function() {
        // Retrieve the selected value
        var choice = $("option:selected", $(this)).val();
        // Get the ID of the current element
        var elementID = $(this).attr("id");
        // Reset to display all values:
        $(".filter option").each(function() {
            $(this).show();
        });
        $(".filter").each(function() {
            if ($(this).attr("id") != elementID) {
                $("option[value='" + choice + "']", $(this)).hide();
            }
        });
    });
});`

Answer 5

Answer №3

Here's a helpful solution for you:

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

        });

Give this a try and see how it works for you.

Answer 6

Here's a helpful solution for you:

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

        });

Give this a try and see how it works for you.

Answer 7

Answer №4

If you want to achieve a certain functionality based on the provided HTML, the following code snippet might help:

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 script disables duplicate options, but consider removing them completely for clarity. An issue arises as all "Preference #" options share the same value. I suggest using optgroup labels or eliminating values and keeping them disabled from the start since they shouldn't be clickable anyway. Learn more about option labels and separators here.

Sample Demo

Answer 8

If you want to achieve a certain functionality based on the provided HTML, the following code snippet might help:

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 script disables duplicate options, but consider removing them completely for clarity. An issue arises as all "Preference #" options share the same value. I suggest using optgroup labels or eliminating values and keeping them disabled from the start since they shouldn't be clickable anyway. Learn more about option labels and separators here.

Sample Demo

Answer 9

Answer №5

Check out the following code snippet that works perfectly without any glitches. I've taken an approach where the selected option is disabled instead of being hidden from other dropdowns.

$( function() {
    course();
});

function course(){   
    var prevSelection;

    $(".primarySelect").on('focus', function () {
        prevSelection = this.value; 
    }).change(function() {
        var currentSelection = $("option:selected", $(this)).val();
        var selectionID = $(this).attr("id");

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

        $(".primarySelect").each(function() {
            var otherID=$(this).attr("id");
            if (otherID != selectionID) {
                if( $('#'+otherID).val() == currentSelection){ $('#'+otherID).val(''); } // needed for data review after form submission
                $("option[value='" + currentSelection + "']", $(this)).attr("disabled", true);
            }

            $("option[value='" + prevSelection + "']", $(this) ).attr("disabled", false); // reset previously selected option in all dropdowns

        });

        prevSelection =  $('#'+selectionID).val();
    });
}

Answer 10

Check out the following code snippet that works perfectly without any glitches. I've taken an approach where the selected option is disabled instead of being hidden from other dropdowns.

$( function() {
    course();
});

function course(){   
    var prevSelection;

    $(".primarySelect").on('focus', function () {
        prevSelection = this.value; 
    }).change(function() {
        var currentSelection = $("option:selected", $(this)).val();
        var selectionID = $(this).attr("id");

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

        $(".primarySelect").each(function() {
            var otherID=$(this).attr("id");
            if (otherID != selectionID) {
                if( $('#'+otherID).val() == currentSelection){ $('#'+otherID).val(''); } // needed for data review after form submission
                $("option[value='" + currentSelection + "']", $(this)).attr("disabled", true);
            }

            $("option[value='" + prevSelection + "']", $(this) ).attr("disabled", false); // reset previously selected option in all dropdowns

        });

        prevSelection =  $('#'+selectionID).val();
    });
}

Eliminate a selected option from one dropdown menu that corresponds to another dropdown menu

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is it possible to utilize two :before pseudo classes within a single div element?

The package 'models' imported from is not found [ERR_MODULE_NOT_FOUND] error

Perform an ajax request to a different domain

Using Node.js to import modules without the need for assignment

Superfish - Adjust the Gap between each button

Prioritize returning AJAX data over iterating through the parent loop

The 'myCtrl' parameter is invalid as it is not recognized as a function and is currently set to undefined

Exploring Vue.Js and Airtable: Mastering the Art of Filtering

"Implementing a show/hide feature for a DIV based on a selected drop-down value using vanilla JavaScript (without any external libraries

What is the best way to interpret and execute conditions specified within strings like "condition1 and condition2"?

Is there a way to incorporate a pixel stream within a React component?

Processing two Array Objects can be achieved without resorting to the EVAL function

When clicking to open the md-select on Angular Material 1.1.0, an unwanted [object object] is being appended

Having trouble with the jQuery load function not functioning properly

AngularJS: Error encountered when trying to assign a value to a read-only property in the ng-submit directive

The functionality of the Kendo dropdown menu is experiencing issues on Internet Explorer 8

What is the method to create an HTML div with a sloping edge?

What was the recommended dimensions for CSS containers in 2018?

What is the benefit of using $q.all() with a single promise in AngularJS?

Is it possible to change label text using CSS without referencing the element by its ID?