How to populate a dropdown using unselected options from other dropdowns?

Question

I use JQuery Steps.In 1st and 2nd step, i have a dropdown with multiple select option.

<select name="numbers" id="numbers">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

in step2(same as step1 but with diff. purpose)

<select name="allocate_numbers" id="allocate_numbers">
  <option value="1">1</option>
   : : :
 </select>

now i have a 3rd dropdown in 3rd step.Here i want selectbox like..suppose user select 1,2 in step1, 3,4 in step2.

now,i want selectbox that contain only 5,6 in step3.
How to do that?

side note: I done validation to prevent duplicate entry for step1 and step2 dropdown. means if user select 1,2 in step1 then he can not select 1,2 in step2. I don't find suitable title for my quetion so feel free to edit it.

"now,i want" You want, that's ok but what have you tried to get it? — A. Wolff
– A. Wolff, Commented Dec 17, 2013 at 12:04

Salman Arshad · Accepted Answer · 2013-12-17 13:29:33Z

5

Updated and better answer:

The solution turns out to be rather simple. Find all unselected options in first dropdown and filter those that are not selected in other dropdowns. Add event delegation and the result is:

$(document).on("change", ".numbers", function () {
    $("#select1").empty();
    $(".numbers:eq(0) option:not(:selected)").filter(function () {
        return $(".numbers:gt(0) option[value=" + this.value + "]:selected").length === 0
    }).clone().appendTo("#select1");
});

Demo here

Original answer:

This turned out to be a real brain twister. Basically you need to:

Prepare combined list of selected values
Iterate over options from both lists
Filter options that are not selected
Filter duplicates
Clone and append

Here is my go at it but there is probably a simpler solution:

$("#numbers, #allocate_numbers").on("change", function () {
    $("#select3").empty();
    var selectedValues = [],
        renderedValues = [];
    $.merge(selectedValues, $("#numbers").val() || []);
    $.merge(selectedValues, $("#allocate_numbers").val() || []);
    $("#numbers option, #allocate_numbers option").filter(function () {
        if ($.inArray(this.value, selectedValues) === -1) {
            if ($.inArray(this.value, renderedValues) === -1) {
                renderedValues.push(this.value);
                return true;
            }
        }
        return false;
    }).clone().appendTo("#select3");
});

Demo here

edited Dec 17, 2013 at 13:29

answered Dec 17, 2013 at 12:11

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vishal Over a year ago

Cant you write $("#numbers option:not(:selected), #allocate_numbers option:not(:selected)").clone().appendTo("#select3");?

Salman Arshad Over a year ago

See revised answer (it turned out to be a nightmare).

DS9 Over a year ago

What if one of dropdown is dynamically added? We get it's value using $('.numbers option:selected').each(function() {. But how to use it? (i got my answer but this one is for knowledge purpose.)

Salman Arshad Over a year ago

If the dropdow is dynamically added then $("#numbers, #allocate_numbers").on() won't work. You need to use delegation. Also the lines $.merge need to be changed to some kind of .each().

DS9 · Accepted Answer · 2013-12-17 13:25:13Z

If one of the dropdown is dynamically added then try this:

    $(document).on('change','.numbers, #allocate_numbers',function(){
    $("#select3").empty();
    var selectedValues = [],
        renderedValues = [];
            $('.numbers option:selected').each(function() {
              $.merge(selectedValues, $(this).val() || []);
            });
    $.merge(selectedValues, $("#allocate_numbers").val() || []);
    $(".numbers option, #allocate_numbers option").filter(function () {
        if ($.inArray(this.value, selectedValues) === -1) {
            if ($.inArray(this.value, renderedValues) === -1) {
                renderedValues.push(this.value);
                return true;
            }
        }
        return false;
    }).clone().appendTo("#select3");
});

marc_s · Accepted Answer · 2016-05-02 18:39:25Z

0

Initially, keep both dropdown values in 3rd dropdown and remove the values from 3rd, when it is selected in first and second dropdown. This is the easiest method.

Try jQuery code to remove and add options in dropdown.

edited May 2, 2016 at 18:39

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Dec 17, 2013 at 12:09

Kumar V

8,8289 gold badges44 silver badges60 bronze badges

Collectives™ on Stack Overflow

How to populate a dropdown using unselected options from other dropdowns?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related