disable select option value when selected

Question

I am using this code. But I'm facing a problem that when I select "one" in 1st select box and then in 2nd I select "two" and when I select again 2nd value to "three" but the value "two" remain disabled:

HTML code

// one <select> <option>Select</option> <option value="1" >one</option> <option value="two">two</option> <option>three</option> </select> //two <select> <option>Select</option> <option value="1" >one</option> <option value="two">two</option> <option>three</option> </select>

This is JavaScript code:

$(document).ready(function(e) { var $selects = $('select#players'); available = {}; $('option', $selects.eq(0)).each(function (i) { var val = $.trim($(this).text()); available[val] = false; }); $selects.change(function () { var $this = $(this); var selectedVal = $.trim($this.find('option:selected').text()); available[selectedVal] = true; $selects.not(this).each(function () { $('option', this).each(function () { var optText = $.trim($(this).text()), optCheck = available[optText]; if(optCheck) { $(this).prop('disabled', true); } else { $(this).prop('disabled', false); } }); }); }).change(); // Trigger once to add options at load of first });

Just a note that if you have complex dependencies on a page, consider using something like knockout.js to handle them instead of jQuery. — Tommi Gustafsson
– Tommi Gustafsson, Commented Apr 9, 2014 at 7:41

Michel · Accepted Answer · 2014-04-09 07:57:08Z

Assuming you want to disable values in the other select-boxes once chosen, here is a sample.

<select> <option value="" selected="selected">Select</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> <select> <option value="" selected="selected">Select</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> $(document).ready(function (e) { var $selects = $('select'); $selects.change(function () { var value = $(this).val(); if (value == "") { return false; } $selects.not(this).each(function () { $('option', this).each(function () { var sel = $(this).val(); if (sel == value) { $(this).prop('disabled', true); } else { $(this).prop('disabled', false); } }); }); }).change(); // Trigger once to add options at load of first });

And a working fiddle

Nick · Accepted Answer · 2014-04-09 07:34:28Z

It's a bit hard to understand what you're asking here. I'm assuming you want to know how to disable an option on both the select boxes when an option is selected in either one. The scenario I'm thinking is that you're displaying a list of players in two select boxes and when one of them is selected by the first team the other team cannot select the same player?

Here's a working fiddle: http://jsfiddle.net/theoutlander/MT5th/. I don't like jquery so I did this in vanilla JS.

// one <select id="s1" onchange="handleSelection(this, s2)"> <option>Select</option> <option value="1">one</option> <option value="two">two</option> <option>three</option> </select> //two <select id="s2" onchange="handleSelection(this, s1)"> <option>Select</option> <option value="1" >one</option> <option value="two">two</option> <option>three</option> </select> function handleSelection(source, dest) { source.options[source.selectedIndex].disabled=true; dest.options[source.selectedIndex].disabled=true; }

in simple language i want to prevent user to select player twice.

gts101 · Accepted Answer · 2014-04-09 07:34:55Z

the first line of your javascript...

var $selects = $('select#players');

...doesn't actually select anything. You need to add an id 'players' to one of your select elements, or change your selector.

Also, I can't figure out what you're actually trying to do. Can you please state more clearly what your aim is?

in simple language i want to prevent user to select player twice.

Collectives™ on Stack Overflow

disable select option value when selected

3 Answers 3

Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Linked

Related