Search jQuery

jQuery Forum

Using jQuery

petattleb..

dependent drop down list add/remove items based on selected

in Using jQuery • 10 years ago

I had great help with an earlier post but have yet to be able to modify it to my needs.

I have four drop down lists that are used so people can rank their favorite items.

When an item is selected in the first drop down list, it then disappears from the 2nd, 3rd and 4th lists.

Then when an item is chosen from the 2nd list, it disappears from the 3rd and 4th, etc...

That part works great.

However, I have two other drop down lists in this form that I do not want affected by this feature.

Unfortunately I have not figured out how to do this yet.

Any help is appreciated.

The code is below, care of Godsbest. Thanks again!

Peter T

<form>
<select id=i1>
</select>
<select id=i2>
</select>
<select id=i3>
</select>
<select id=i4>
</select>
</form>

var txt = 'Select One';
var options = ['One','Two','Three','Four','Five','Six','Seven','Eight','Nine','Ten'];
var used = [];
$(function() {
$('select').each(function() {
$this = $(this);
$('<option/>').text( txt ).appendTo( $this );
$.each(options,function(i,v) {
$('<option/>').text( v ).appendTo( $this );
});
});
$('select').on('change',function() {
used = $.map( $('select').filter(function() { return $(this).val() !== txt; }), function(v,i) { return v.value; });
$('select').each(function(i,v) {
var $this = $(this);
var val = $this.val();
$this.html('');
$('<option/>').text( txt ).appendTo( $this );
$.each(options,function(i,v) {
($.inArray(v, used) > -1 && (v !== val) ) || $('<option/>').text( v ).appendTo( $this );
});
$this.val( val );
});
});
});

Replies(3)

dsvick

Re: dependent drop down list add/remove items based on selected

10 years ago

The code above has selectors like $('select'), those selectors will select every select element in the document. If you want to limit them the best way would be to add a class to the ones that you want to have that behavior. For example, if you gave them all a class "favorites" then you could change all the selectors in the code above to $("select.favorites").

That should take care of it for you.

Dave

petattleb..

Re: dependent drop down list add/remove items based on selected

10 years ago

Thanks Dave!!!

As you would expect, it worked!

petattleb..

Re: dependent drop down list add/remove items based on selected

10 years ago

Of course I spoke too soon. The code below works on Firefox and Chrome but not IE (8).

Any chance there's a fairly pain free fix?

Thanks!

Peter T

$(document).ready(function() {
var txt = 'Select Student Choice';
var options = ['Art 100','Women\'s Studies','Philosophy 108','Music 115'];
var used = [];
$(function() {
$("select.yours").each(function() {
$this = $(this);
$('<option/>').text( txt ).appendTo( $this );
$.each(options,function(i,v) {
$('<option/>').text( v ).appendTo( $this );
});
});
$("select.yours").on('change',function() {
used = $.map( $("select.yours").filter(function() { return $(this).val() !== txt; }), function(v,i) { return v.value; });
$("select.yours").each(function(i,v) {
var $this = $(this);
var val = $this.val();
$this.html('');
$('<option/>').text( txt ).appendTo( $this );
$.each(options,function(i,v) {
($.inArray(v, used) > -1 && (v !== val) ) || $('<option/>').text( v ).appendTo( $this );
});
$this.val( val );
});
});
});
});

<p><label for="i1">1st Choice:<span class="required">* </span><label for="xshort_field_003" class="error">This is a required field.</label></label>
<select id="i1" name="xshort_field_003" class="yours" validate="required:true" tabindex="37">
</select></p>
<p><label for="i2">2nd Choice:<span class="required">* </span><label for="xshort_field_004" class="error">This is a required field.</label></label>
<select id="i2" name="xshort_field_004" class="yours" validate="required:true" tabindex="38">
</select></p>
<p><label for="i3">3rd Choice:<span class="required">* </span><label for="xshort_field_005" class="error">This is a required field.</label></label>
<select id="i3" name="xshort_field_005" class="yours" validate="required:true" tabindex="39">
</select></p>
<p><label for="i4">4th Choice:<span class="required">* </span><label for="xshort_field_006" class="error">This is a required field.</label></label>
<select id="i4" name="xshort_field_006" class="yours" validate="required:true" tabindex="40">
</select></p>

Top Reply

Response title

Attachments

jQuery Forum

dependent drop down list add/remove items based on selected

Replies(3)

Re: dependent drop down list add/remove items based on selected

Re: dependent drop down list add/remove items based on selected

Re: dependent drop down list add/remove items based on selected

Statistics

Tags

Actions