HTML Dropdown disable options in Javascript

Question

Question: Below code is to hide options from the dropdown of selected items. Thus, when the user selects the option it will hide the selected value in all the dropdowns selection lists. I have four dropdown selections right now, I want to achieve like it will enable current selected option value when the dropdown selection is trigger (Mean user able to select back the value in the dropdown selection when user trigger). I tried to use this line code to disabled the value $(this).find('option').prop('disabled', false);, but it will only work for last click of the dropdown selection. Anyone can help with this issue ya?

$(".firstname").on('change', function() {


  $(".firstname option").prop("disabled", false); //enable everything

  //collect the values from selected;
  var arr = $.map(
    $(".firstname option:selected"),
    function(n) {
      return n.value;
    }
  );

  //disable elements
  $(".firstname option").filter(function() {
    return $.inArray($(this).val(), arr) > -1; //if value is in the array of selected values
  }).prop("disabled", true);

  //re-enable elements
  $(".firstname option").filter(function() {
    return $.inArray($(this).val(), arr) == -1; //if value is not in the array of selected values
  }).prop("disabled", false);

  $(this).find('option').prop('disabled', false); //re-enable the current one
});


$('.savebtn').on('click', function() {
  $('.cbb').find('select option:selected').each(function(index, item) {
    var selectVal = $(this).val();
    console.log(selectVal);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cbb">


  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_148" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>
  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_150" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

</div>
<button type="button" class="btn btn-primary savebtn">Save</button>

I don't understand what you're trying to do. When you select something from a menu, you disable that option from all the other menus, and you enable everything in this menu. Then when you select from another menu, all the selected options are again disabled from all menus, but everything in this menu is re-enabled. — Barmar, Feb 20 '21 at 09:09
Oh sorry got some mistake in the explanation. For example, dropdown A selected (K-76), and dropdown B selected (AF). Then when the user triggers back the dropdown A, the value of K-76 should enable and able to select. Because now it will disable it. — ventures 999, Feb 20 '21 at 09:13
@ventures999 Just wanted to mention that you can also [use a multiselect plugin](https://crlcu.github.io/multiselect/examples/zero-configuration.html). You'll just need to limit the number of selections. Much cleaner solution in my opinion. — Miro, Feb 20 '21 at 22:28

score 2 · Answer 1 · answered Feb 20 '21 at 12:57

You can use only one each loop and iterate through all your selects and disable value from other selects with same values . Also , to exclude the option of select which is been iterated to be disable you can use not(this) .

Demo Code :

$(".firstname").on('change', function() {
  //enable all
  $("select.firstname option").prop('disabled', false)
  //loop through select box
  $("select.firstname").each(function() {
    var values = $(this).val()
    if (values != "-1") {
      //find option where value matches disable them
      $("select.firstname").not(this).find("option[value=" + values + "]").prop('disabled', true);
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cbb">


  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_148" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>
  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_150" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">

    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

</div>
<button type="button" class="btn btn-primary savebtn">Save</button>

This method works, but it's will have one issue when the selection has more than 100, it will become slow when selecting the option. — ventures 999, Feb 22 '21 at 12:59

Miro · Accepted Answer · 2021-02-20T20:35:16.340

Turns out it's a bit more complex since there are multiple selects.

In the re-enable filter I've added a check agains the parent-select of each option to see what it's value is and if it's equal to the value of the option:

Also see this question. Apparently, you can't just do $(this).val(); within an onChange on a <select>. It has to be vanilla js this.value or in your case $( //some-jquery-object// )[0].value. (The [0] converts jquery object to vanilla js element.)

return $.inArray($(this).val(), arr) == -1 || $(this).parent('select')[0].value == $(this).val() }).prop("disabled", false);

$(".firstname").on('change', function() {


  $(".firstname option").prop("disabled", false); //enable everything

  //collect the values from selected;
  var arr = $.map(
    $(".firstname option:selected"),
    function(n) {
      return n.value;
    }
  );

  //disable elements
  $(".firstname option").filter(function() {
    return $.inArray($(this).val(), arr) > -1; //if value is in the array of selected values
  }).prop("disabled", true);


  
  //re-enable elements
  $(".firstname option").filter(function() {
    
    //console.log( $(this).parent('select')[0].value, $(this).val());
    
    return $.inArray($(this).val(), arr) == -1 || $(this).parent('select')[0].value == $(this).val() //if value is not in the array of selected values
  }).prop("disabled", false);

  //$(this).find('option:selected').prop('disabled', false); //re-enable the current one
});


$('.savebtn').on('click', function() {
  $('.cbb').find('select option:selected').each(function(index, item) {
    var selectVal = $(this).val();
    console.log(selectVal);
  });
});

$parentSelect.find('option:selected').prop('value') == $parentSelect[0].value;

console.log($parentSelect.find('option:selected').prop('value'), $parentSelect[0].value)
console.log($parentSelect.find('option:selected').prop('value'), $parentSelect[0].value)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cbb">

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_148" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>
  
  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

  <select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_150" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
    <option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
    <option value="1">K-76</option>
    <option value="2">Af</option>
    <option value="3">A-c</option>/option>
    <option value="4">D-B</option>
    <option value="5">329</option>
    <option value="6">F-g</option>
    <option value="7">AT</option>
  </select>

</div>
<button type="button" class="btn btn-primary savebtn">Save</button>

HTML Dropdown disable options in Javascript

2 Answers2

Linked