从带有 JS 但不是空项目的 select 列表中删除项目

Question

The application uses ColdFusion to read a CSV file and display the column headers for mapping to the column headers our application will accept. The number of column headers uploaded will be varied and total number unknown. The application acceptable values are displayed in a list. Once a value is selected from the list, it cannot be used in any other select list. I have separators with "" values and a typical "Select One" option with a null value. When an option in the list is selected, it does remove that option from all the other lists on the page but it also removes the "" options from the active select list which is undesirable because if the user makes a mistake and wants to reset their selection to "", they cannot. Please help me understand how to keep the JS working as is, but only if the select list items are not "" value.

// when an option is selected, remove that option from all other select lists

// problem discovered: removes all NULL items (select one and section breaks) from the list too.  need to retain null items 
function checkTheDropdowns() {
  var arr = $('select').find(':selected');

  $('select').find('option').show();

  $.each($('select'), function() {
    var self = this;
    var selectVal = $(this).val();

    console.log("selectVal: " + selectVal);
    console.log("this: " + this);

    //if the selected value is "", do not remove it from the list
    //if (selectVal){

    $.each(arr, function() {
      if (selectVal !== $(this).val()) {
        $(self).find('option[value="' + $(this).val() + '"]').hide()

      } else {
        $(self).find('option[value="' + $(this).val() + '"]').show()
      }
    });

    //}
  })
};

Answer 1

When deciding if an option should be hidden I would use a check for if the value has length before deciding to hiding it.

Since the number 0 is considered falsy in Javascript you can just add a simple if( $(this).val().length ) check.

I added my own html to test this and i hope that it is somewhat close to similar to your actual application.

This would remove options from all other <select> 's except for options with "" value.

 function checkTheDropdowns() { var arr = $('select').find(':selected'); $('select').find('option').show(); $.each($('select'), function() { var self = this; var selectVal = $(this).val(); $.each(arr, function() { if (selectVal === $(this).val()) { $(self).find('option[value="' + $(this).val() + '"]').show(); } else if($(this).val().length) { //<---- This is the actual solution $(self).find('option[value="' + $(this).val() + '"]').hide(); } }); }); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select-one" onchange="checkTheDropdowns()"> <option selected disabled>Select one</option> <option value=""></option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> <option value="e">e</option> <option value="f">f</option> </select> <select id="select-two" onchange="checkTheDropdowns()"> <option selected disabled>Select one</option> <option value=""></option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> <option value="e">e</option> <option value="f">f</option> </select> <select id="select-three" onchange="checkTheDropdowns()"> <option selected disabled>Select one</option> <option value=""></option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> <option value="e">e</option> <option value="f">f</option> </select>