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
– Barmar, Commented Feb 20, 2021 at 9: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
– ventures 999, Commented Feb 20, 2021 at 9:13

Swati · Accepted Answer · 2021-02-20 12:57:39Z

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.

Miro · Accepted Answer · 2021-02-20 20:35:16Z

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>

Collectives™ on Stack Overflow

HTML Dropdown disable options in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related