prevent selecting the same option from a different select box

Question

From W3schools example (do not make any comment about W3Schools I am just using it for an example). A select option looks like this:

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

Lets say that 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, that if somebody selected an option from the first select.. he/she cannot select it from the second select. How can I accomplish that? i.e. how can I automatically remove Volvo from the second select if it was selected in the first select? If it is not possible using jQuery, then how can I prevent it using PHP?

My guess is by using array_unique :

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

[Edit after posting the question]

this question is relevant to mine. However, I do not want the option to be disabled.. I want the option to be removed or hidden. Also, I would like to see how it can be done using PHP

Answer 1

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

To go through all selects, make the javascript like:

$('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 that will remove the options from all other selects.

Alternate Option

Alternate Option to only use 'named' selectors jsFiddle: 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);
            }
        });
    });
});

Answer 2

You can use hidden attribute (or simply .hide(), display: none) to temporarily hide necessary option, thus making it impossible to select it:

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 also 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 may also want to validate this data on the server side. In this case if user selected the same values then POST array will look like:

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

So it's quite 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
}