Geek Answers Handbook

Disallow selection of the same option from another selection window

From the W3schools example (don't comment on W3Schools, I just use it as an example). The selection option is as follows:

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

Suppose I have two select options with the same name

 <select name="name[]"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <select name="name[]"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

Now, what I want to accomplish using jQuery, if someone chooses an option from the first choice, he / she will not be able to select it from the second choice. How can i do this? For example, how can I automatically remove Volvo from the second choice, if it was selected in the first choice? If this is not possible with jQuery, then how can I prevent it from being used by PHP?

My guess is to use array_unique :

  foreach(array_unique($_POST['name']) as $name){ if (!empty($name)){ // do something }

[Edit after posting the question]

This question matters to mine. However, I do not want this option to be disabled. I want the option to be removed or hidden. In addition, I would like to see how this can be done using PHP

+4
source share
2 answers

Fiddle: http://jsfiddle.net/jFMhP/

To go through all the selections, do javascript as follows:

 $('select').change(function() { var myOpt = []; $("select").each(function () { myOpt.push($(this).val()); }); $("select").each(function () { $(this).find("option").prop('hidden', false); var sel = $(this); $.each(myOpt, function(key, value) { if((value != "") && (value != sel.val())) { sel.find("option").filter('[value="' + value +'"]').prop('hidden', true); } }); }); });

And this will remove the parameters from all the others.

Alternative option

An alternative option is to use only the 'named' jsFiddle selector: http://jsfiddle.net/jlawrence/HUkRa/2/ Code:

 $('select[name="name[]"]').change(function() { var myName = '[name="name[]"]'; var myOpt = []; $("select"+ myName).each(function () { myOpt.push($(this).val()); }); $("select"+ myName).each(function () { $(this).find("option").prop('hidden', false); var sel = $(this); $.each(myOpt, function(key, value) { if((value != "") && (value != sel.val())) { sel.find("option").filter('[value="' + value +'"]').prop('hidden', true); } }); }); });
+6
source

You can use the hidden attribute (or just .hide() , display: none ) to temporarily hide the required parameter, which makes it impossible to select:

 var $second = $('.select-two'); $('.select-one').change(function() { $second.find('option').prop('hidden', false) .filter('[value="' + $(this).val() + '"]').prop('hidden', true); $(this).val() == $second.val() && $second.val(''); });

http://jsfiddle.net/FDRE7/

And, of course, we can make it work in both directions:

 var $select = $('.select').change(function() { var $other = $select.not(this); $select.find('option').prop('hidden', false) .filter('[value="' + $(this).val() + '"]').prop('hidden', true); $(this).val() == $other.val() && $other.val(''); });

http://jsfiddle.net/FDRE7/1/

You can also check this data on the server side. In this case, if the user selects the same values, then the POST array will look like this:

 Array ( [name] => Array ( [0] => mercedes [1] => mercedes ) )

So it's pretty easy to check:

 if ($_POST['name'][0] == $_POST['name'][1]) { // not allowed, redirect back }

or

 if (count(array_unique($_POST['name'])) == 1) { // not allowed, redirect back }
+4
source

More articles:


All Articles