jQuery remove SELECT options based on another SELECT selected (Need support for all browsers)

Question

Say I have this dropdown:

<select id="theOptions1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

I want it so that when the user selects 1, this is the thing that the user can choose for dropdown 2:

<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

Or if the user selects 2:

<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
</select>

Or if the user selects 3:

<select id="theOptions2">
  <option value="b">b</option>
  <option value="c">c</option>
</select>

I tried the code posted here: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

But it doesn't work for selects.

Please help! Thank you!

UPDATE: I really like the answer Paolo Bergantino had on: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Is there anyway to modify this to work with selects instead of radio buttons?

jQuery.fn.filterOn = function(radio, values) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);
        $(radio).click(function() {
            var options = $(select).empty().data('options');
            var haystack = values[$(this).attr('id')];
            $.each(options, function(i) {
                var option = options[i];
                if($.inArray(option.value, haystack) !== -1) {
                    $(select).append(
                    $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });            
    });
};

karim79 · Accepted Answer · 2009-08-14T01:09:25.740

This works (tested in Safari 4.0.1, FF 3.0.13):

$(document).ready(function() {
    //copy the second select, so we can easily reset it
    var selectClone = $('#theOptions2').clone();
    $('#theOptions1').change(function() {
        var val = parseInt($(this).val());
        //reset the second select on each change
        $('#theOptions2').html(selectClone.html())
        switch(val) {
            //if 2 is selected remove C
            case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
            //if 3 is selected remove A
            case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
        }
    });
});

And the beautiful UI:

<select id="theOptions1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

kevingessner · Answer 2 · 2009-09-15T23:41:41.023

9

You can add classes to your <option>s to store which go with each value of #theOptions1:

<select id="theOptions2">
  <option value="a" class="option-1 option-2">a</option>
  <option value="b" class="option-1 option-2 option-3">b</option>
  <option value="c" class="option-1 option-3">c</option>
</select>

then do this:

$(function() {
    var allOptions = $('#theOptions2 option').clone();
    $('#theOptions1').change(function() {
        var val = $(this).val();
        $('#theOptions2').html(allOptions.filter('.option-' + val));
    });
});

edited Sep 15 '09 at 23:41

answered Aug 14 '09 at 00:44

kevingessner

18,559
5
43
63

I like this better. Just a small correction - it should be: $('#theOptions2').html(... – Daniel Alexiuc Sep 15 '09 at 04:15
Pretty slick. Modifies the presentational code, but all in all, very extend-able. – Kzqai Feb 10 '10 at 18:48

score 1 · Answer 3 · edited Oct 04 '11 at 23:03

1

For the record you can NOT remove options in a select list in Internet Explorer.

edited Oct 04 '11 at 23:03

Nightfirecat

11,432
6
35
51

answered Aug 14 '09 at 00:33

scunliffe

62,582
25
126
161

1

I think he means remove rather than disable. – karim79 Aug 14 '09 at 00:37
Oh dear Flying Spaghetti Monster! It's a URL shortener! – random Oct 30 '09 at 09:20

akshay tilekar · Answer 4 · 2017-11-07T09:43:29.553

try this. this will definitely work

      $(document).ready(function () {

    var oldValue;
    var oldText;
    var className = '.ddl';

    $(className)
                .focus(function () {
                    oldValue = this.value;
                    oldText = $(this).find('option:selected').text();
                })
                .change(function () {
                    var newSelectedValue = $(this).val();
                    if (newSelectedValue != "") {
                        $('.ddl').not(this).find('option[value="' + newSelectedValue + '"]').remove();
                    }
                    if ($(className).not(this).find('option[value="' + oldValue + '"]').length == 0) { // NOT EXIST
                        $(className).not(this).append('<option value=' + oldValue + '>' + oldText + '</option>');
                    }
                    $(this).blur();
                });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="/Home/Ex2" method="post">
    <select class="ddl" id="A1" name="A1">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <select class="ddl" id="A2" name="A2">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <select class="ddl" id="A3" name="A3">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <select class="ddl" id="A4" name="A4">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <input type="submit" name="submit" value="Save Data" id="btnSubmit" />
</form>

score 0 · Answer 5 · answered Jan 31 '12 at 22:42

Actually, using the code below will remove a dropdown option just fine in IE, as long as it is not the selected option (it will not work on "a" without deselecting that option first):

var dropDownField = $('#theOptions2');
dropDownField.children('option:contains("b")').remove();

You just run this to remove whatever option you want to remove under a conditional statement with the first group (theOptions1) - that if one of those is selected, you run these lines:

var dropDownField = $('#theOptions2');
if ($('#theOptions1').val() == "2") {
    dropDownField.children('option:contains("c")').remove();
}
if ($('#theOptions1').val() == "3") {
    $("#theOptions2 :selected").removeAttr("selected");
    $('#theOptions2').val('b');
    dropDownField.children('option:contains("a")').remove();
}

-Tom

jQuery remove SELECT options based on another SELECT selected (Need support for all browsers)

5 Answers5

Linked