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

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

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

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

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();
});

另外，当您添加新元素或删除select时，您需要调用updateSelect()，以便在添加/删除元素时，其他元素将更新Disabled属性。

以下显示了没有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>

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

1 个答案: