12

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) ); } }); }); }); };
Improve this question

5 Answers 5

Reset to default
15

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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)); }); });
Improve this answer

2 Comments

I like this better. Just a small correction - it should be: $('#theOptions2').html(...
Pretty slick. Modifies the presentational code, but all in all, very extend-able.
1

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

Improve this answer

2 Comments

I think he means remove rather than disable.
Oh dear Flying Spaghetti Monster! It's a URL shortener!
1

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>

Improve this answer

Comments

0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.