javascript - 检查选择选项类是否已存在

Question

我想在 html 中动态附加一个选择元素，并且当任何选择中的任何选项发生更改时，我想检查该选项是否已在任何现有选择元素中被选中。

为此，我为每个选择选项使用一个类，并且当任何选择中的选项发生更改时，请检查该类选定选项是否已经存在。

我正在使用以下代码，但我无法弄清楚如何检查每个选择以查看是否选择了相同的选项。

HTML：

<div class="list">

</div>

<div class="hide">
  <select>
    <option value=""></option>
    <option class="a" value="">A</option>
    <option class="b" value="">B</option>
    <option class="c" value="">C</option>
    <option class="d" value="">D</option>
  </select>
</div>

 <button class="add" type="add">Add</button> 

JS：

$('.add').on('click', function(e){
    $('.list').append($('.hide').html());

});


$(document).on('change', '.list select', function(){

var cls = $(this).find(':selected').attr('class');

if ($('.list .'+cls).length > 0) {
    alert('It exists');
}


});

JSFiddle：http: //jsfiddle.net/vtzor9Ld/

标签： javascriptjquery

Answer 1

您的代码可以用这一行修复：

if ($(`.list option.${cls}:selected`).length > 1) {
    console.log('It exists');
}

您需要测试超过 1 次（而不是 0 次），并且您只想测试匹配类的选定选项

这是另一种方法，可以在有用信息的情况下逐个查找事件。

$('.add').on('click', function(e) {
  $('.list').append($('.hide').html());
});

$(document).on('change', '.list select', function() {
  var cls = $(this).find(':selected').attr('class');
  $('.list select').not($(this)).find('option:selected').each(function(i) {
    if ($(this).hasClass(cls)) console.log("Matching class on select # " + (i + 1))
  })
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list"></div>
<div class="hide">
  <select>
    <option value=""></option>
    <option class="a" value="">A</option>
    <option class="b" value="">B</option>
    <option class="c" value="">C</option>
    <option class="d" value="">D</option>
  </select>
</div> <button class="add" type="add">Add</button>