drop options in dropdown box

Question

I am using 24 dropdowns. I want to select a driver for a position. But when i select a driver for the first position it should be removed from the other dropdowns so i can't use a driver two times. The dropdown is:

<select name="rijderQual1">
<option value="1">S. Vettel</option>
<option value="2">M. Webber</option>
<option value="3">J. Button</option>
<option value="4">L. Hamilton</option>
<option value="5">F. Alonso</option>
<option value="6">F. Massa</option>
<option value="7">M. Schumacher</option>
<option value="8">N. Rosberg</option>
<option value="9">K. Raikkonen</option>
<option value="10">R. Grosjean</option>
<option value="11">R. 11</option>
<option value="12">R. 12</option>
<option value="14">K. Kobayashi</option>
<option value="15">S. Perez</option>
<option value="16">R. 16</option>
<option value="17">R. 17</option>
<option value="18">P. Maldonado</option>
<option value="19">R. 19</option>
<option value="20">H. Kovalainen</option>
<option value="21">J. Trulli</option>
<option value="22">P. de</option>
<option value="23">R. 23</option>
<option value="24">T. Glock</option>
<option value="25">C. Pic</option>
</select>

The names are rijderQual1 to rijderQual24. So when i select S Vettel for example in rijderQual1 it should be removed from the 23 other dropdowns.

Is there a way to do this? I think it should be done with JS or jQuery?

UX-wise this sounds like a bad idea. For example, if you want to switch places between two dropboxes, you'd first have to find the one that currently uses the value you want to switch to and unpopulate it before you can give it the correct value. Imagine then switching more than two places. Maybe colour-highlighting dropdowns with the same value would be better? — Jan, Oct 15 '12 at 08:46
I've added a suggestion that works somewhat like that, you could take a look. Also, your accepted answer doesn't work in Chrome. — Jan, Oct 15 '12 at 09:57

Michal Klouda · Accepted Answer · 2012-10-15T08:59:18.270

3

You can iterate thru all options everytime some selected value is changed and hide the options that are selected somewhere else:

$('select').change(function() {

    var selectedValues = $('select').map(function() { return this.value; }).get();

    $('option').show();

    $.each($('option'), function(i, item) {

        if($(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 )
        {
            $(this).hide();
        }
    });

});

DEMO

edited Oct 15 '12 at 08:59

answered Oct 15 '12 at 08:42

Michal Klouda

14,263
7
53
77

is there a way i can use both ? – Rick Weller Oct 15 '12 at 09:10
yes, add a class to quals or wrap them with a div and update selectors respectively – Michal Klouda Oct 15 '12 at 09:16

score 2 · Answer 2 · answered Oct 15 '12 at 08:38

2

Try populating your dropdown box through an array, and on each item selected delete that item from that array. both JS and JQuery would work.

answered Oct 15 '12 at 08:38

Omar As'hab

138
5

Jan · Answer 3 · 2012-10-15T09:56:52.800

I still believe another approach would be wiser, for example colour-coding all dropdowns that have the same value selected. Or unselect the option from the first dropdown if you select it in another. That way you wouldn't deprive users from doing what they want, but warn them if they try to do something that's not allowed. Better for UX. Something a little more like this.

// Store text labels for options
$("option")
    .each(function() {
        $(this).data("label", $(this).text());
    });

$('select').change(function() {
    // Get selected values
    var  selectedValues = $('select').map(function() { return this.value; }).get();
    // Reset conflicting dropdowns
    currentVal = $(this).val();
    $(this).siblings("select")
        .each(function() { 
            if ($(this).val() == currentVal) $(this).val(0);
        });
    // Mark selected options as unavailable
    $("option")
        .each(function() {
            if( $(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 && !$(this).is(":selected"))
                $(this).text("(" + $(this).data("label") + ")");
            else
                $(this).text($(this).data("label"));
        });

});

DEMO: http://jsfiddle.net/NAWNP/

Still, according to your requirements this would iterate through the options, disabling those that are in use by other dropdowns. This way you can still see your options, even though you can't make them.

$('select').change(function() {

    var selectedValues = []
    $("option:selected").each(function() { selectedValues.push($(this).val()) });
    $("option")
        .removeAttr("disabled")
        .each(function() {
            if( $(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 && !$(this).is(":selected"))
            {
                $(this).attr("disabled", "true");
            }
        });

});

DEMO: http://jsfiddle.net/ntxmh/2/

score 0 · Answer 4 · edited May 23 '17 at 11:56

0

Working demo http://jsfiddle.net/zyGH7/

another http://jsfiddle.net/fLTxj/

Much concise version. This is the source: jQuery remove options except current (Very well written)

Hope it fits the cause! B-)

Code

$('document').ready(function() {
    $(".hulk").change(function() {
        var val = this.options[this.selectedIndex].value;
        $('select').not(this).children('option').filter(function() {
            return this.value === val;
        }).remove();


    });
});

edited May 23 '17 at 11:56

Community

1
1

answered Oct 15 '12 at 08:52

Tats_innit

33,991
10
71
77

1

This solution doesn't show back the unselected items, since it removes them permanently. Compare to mine, which hiddes/unhiddes them @Rick – Michal Klouda Oct 15 '12 at 09:02
@MichalKlouda http://jsfiddle.net/fLTxj/ `:)` lol I am not sure why I got downvote anyways! +1'ed you anyhoo – Tats_innit Oct 15 '12 at 09:09
I didn't downvote. Your fiddle seems to be reseting previously selected values, fix it and you have my upvote ;) – Michal Klouda Oct 15 '12 at 09:13
Nope, when you change second select, the first one gets reset. – Michal Klouda Oct 15 '12 at 09:14
@MichalKlouda lol cool, you do realize your demo is broken: http://jsfiddle.net/Xff7K/1/ select `j. button` and then see it is available in second drop down `:)` – Tats_innit Oct 15 '12 at 09:16
interesting, tested just in chrome.. you are right.. but i have to leave now for a while :) – Michal Klouda Oct 15 '12 at 09:28
@MichalKlouda all good bruv! chill `:)` I thought I will let you know! I still donno why I got DV, anyhoo – Tats_innit Oct 15 '12 at 09:29

drop options in dropdown box

4 Answers4