javascript - 如何防止选择相同的选项值

Question

我试图禁用具有相同值的相同选项值被选中，我使用相同的选项 html id/class，这是我找到了几个使用两个不同选项值的解决方案。

How to make sure two select menu values are not the same with jquery?

上面的解决方案工作得很好，但我不知道它是否使用相同的选项值 id/class

下面是我的代码

PHP

<?php
$locationnow = $class->locationnow($con);
if(mysqli_num_rows($locationnow)){
 while($row = mysqli_fetch_array($locationnow)){
  $selectlist .= '<option value="'.$row['id'].'">'.$row['location_name_en'].'</option>';
 }
}
?>

//HTML

<select class="form-control" id="location_id" name="location_id[0]">
  <?php echo $selectlist; ?>
</option>

<button class="btn-sm btn btn-primary" type="button" onclick="addLocation()" >Add</button>

//JQUERY 这是为了添加另一个位置

var loc = 0;

function addLocation(){

    var html = '';

    loc += 1;

    var numDisplay = loc+1;

    html += '<div class="form-group">';

    html += '<button class="btn btn-danger btn-xs"onclick="$(this).closest(\'.form-group\').remove()" type=button><i class="fa fa-times"></i></button>&nbsp;';

    html += '<label for="location_id">Location '+numDisplay+'</label>';

    html += '<select class="form-control" name="location_id['+loc+']" id="location_id">';

    html += '<?php echo $selectlist; ?>';

    html += '</select>';

    html += '</div>';

    $('.locationRows').append(html);


}

//THIS IS TO REMOVE DUPLICATE
$('#location_id').on('change',function(){
var optionInSelect2 = $('#location_id').find('option[value!="'+$(this).val()+'"]');
 if(optionInSelect2.length) {
   optionInSelect2.attr('disabled','disabled');
  }
});

Answer 1

首先，避免使用相同的id在 html 中自 $("#location_id")即使有两个元素也只会选择一个元素。

在这种情况下，我使用 $("select[name^='location_id']")选择 <select> JQuery 元素。

我实现了以下功能来处理禁用的选项。

function updateSelect(){
    var selectedValue = [];
    $("select[name^='location_id']").each(function(index, element){
        var value = $(element).val();
        if(value.length > 0){
            selectedValue.push(value);
        }
    });

    $("select[name^='location_id'] option").attr("disabled", false);
    $("select[name^='location_id'] option").not(":selected").each(function(index, element){
        if(selectedValue.indexOf($(element).val()) !== -1){
            $(element).attr("disabled", true);
        }
    });
}

自从你的 <select>元素是动态创建的，将事件监听器添加到$('#location_id')不适用于所有元素。您需要将事件监听器添加到主体，并将选择器作为参数传递。

$("body").on("change", "select[name^='location_id']", function(e){
    updateSelect();
});

此外，当您添加新元素或删除选择时，您需要调用updateSelect()。 ，这样当添加/删除元素时，其他元素将更新禁用属性。

下面显示了一个没有 PHP 的工作示例。 (我用一些虚拟选项替换了你的 PHP 输出)

  var loc = 0;

  function updateSelect() {
    var selectedValue = [];
    $("select[name^='location_id']").each(function(index, element) {
      var value = $(element).val();
      if (value.length > 0) {
        selectedValue.push(value);
      }
    });

    $("select[name^='location_id'] option").attr("disabled", false);
    $("select[name^='location_id'] option").not(":selected").each(function(index, element) {
      if (selectedValue.indexOf($(element).val()) !== -1) {
        $(element).attr("disabled", true);
      }
    });
  }

  function addLocation() {

    var html = '';

    loc += 1;

    var numDisplay = loc + 1;

    html += '<div class="form-group">';

    html += '<button class="btn btn-danger btn-xs"onclick="$(this).closest(\'.form-group\').remove();updateSelect();" type=button><i class="fa fa-times"></i></button>&nbsp;';

    html += '<label for="location_id">Location ' + numDisplay + '</label>';

    html += '<select class="form-control" name="location_id[' + loc + ']" id="location_id">';

    html += '<option value="">---Please Select---</option><option value="1">Location A</option><option value="2">Location B</option><option value="3">Location C</option>';

    html += '</select>';

    html += '</div>';

    $('.locationRows').append(html);

    updateSelect();

  }

  $("body").on("change", "select[name^='location_id']", function(e) {
    updateSelect();
  });

<select class="form-control" id="location_id" name="location_id[0]">
  <option value="">---Please Select---</option>
  <option value="1">Location A</option>
  <option value="2">Location B</option>
  <option value="3">Location C</option>
</select>

<button class="btn-sm btn btn-primary" type="button" onclick="addLocation()">Add</button>

<div class="locationRows"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>