Remove and add values from dropdown using javascript/jQuery

Question

I am trying to achieve the following thing in my code but it is getting complicated. I have 'n' dropdowns with or without duplicate values in it.

for simplicity lets assume following scenario:

dropdown1:

<select>
<option>100</option>
<option>200</option>
<option>102</option>
</select>

dropdown 2:

<select>
<option>100</option>
<option>200</option>
<option>201</option>
</select>

dropdown3 :

<select>
<option>100</option>
<option>300</option>
<option>301</option>
</select>

case1: if user select value 100 from dropdown 1 then 100 should be removed from all the dropdowns.and when user change dropdown 1 value from 100 to 200 then 100 should be added back to all the dropdowns and 200 should be removed from all the dropdowns.

removing seems easy but adding back values is little difficult.

how can I maintain a list or some other data structure to remember which value to add and where incase of multiple value change? is there any advance jquery feature or generic javacript logic i can use ?

How about if they select 100 from 1st select and 200 from 2nd select, do you remove 200 from first then? — vabii
– vabii, Commented May 18, 2017 at 18:15
Will changing the drop down manually happen only for the first drop down ? — Istiaque Ahmed
– Istiaque Ahmed, Commented May 18, 2017 at 18:17
Would it be sufficient to disable the option instead of removing? — empiric
– empiric, Commented May 18, 2017 at 18:18

empiric · Accepted Answer · 2017-05-18 18:29:28Z

1

If it is sufficient to just disable the option instead of actually removing it, the following could work for you. You might want to adapt the handling of the selects when initially loading the site.

$('select option[value="' + $('select').eq(0).val() + '"]').not(':eq(0)').prop('disabled', true);

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

  var val = $(this).val();

  $('select option').prop('disabled', false);
  $('select option[value="' + val + '"]').not($(this)).prop('disabled', true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='100'>100</option>
  <option value='200'>200</option>
  <option value='102'>102</option>
</select>
<select>
  <option value='100'>100</option>
  <option value='200'>200</option>
  <option value='201'>201</option>
</select>
<select>
  <option value='100'>100</option>
  <option value='300'>300</option>
  <option value='301'>301</option>
</select>

answered May 18, 2017 at 18:29

empiric

7,8767 gold badges40 silver badges51 bronze badges

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

1 Comment

Pratik Nandoskar Over a year ago

+1 Yes I have disabled the selected options in other dropdowns and it works like charm. simple and elegant.

orabis · Accepted Answer · 2017-05-18 18:21:52Z

0

It would be better to set display to none instead. Hence, you will avoid the complications of adding or removing in the appropriate order. So, you can easily return them visible.

$( "option" ).each(function( index ) {
    $(this).css("display", "");
});

edited May 18, 2017 at 18:21

answered May 18, 2017 at 18:16

orabis

2,8192 gold badges15 silver badges29 bronze badges

Comments

Osama · Accepted Answer · 2017-05-18 18:28:24Z

0

$("#drop").change(function () {
var selected_value=$(this).val();
var dropdown=$(select);
for(i=0;i<dropdown.length;i++){
$("dropdown[i]   option[value=selected_value]").remove();
}
});

Set id of first dropdown="drop" Here select the value and define it S a variable loop through dropdown with in page remove option when value=selected_value

answered May 18, 2017 at 18:28

Osama

3,0301 gold badge15 silver badges16 bronze badges

Collectives™ on Stack Overflow

Remove and add values from dropdown using javascript/jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related