使用JQuery(用于创建比较）避免重复的下拉项

To avoid duplicate drop-down items with JQuery (For Create Compare)

本文关键字：JQuery 用于 创建 比较 使用      更新时间：2023-09-26

对不起(我英语写不好！(我想当更改组合框选定项目时，此项目(选定项目(隐藏在其他组合框中，当再次更改时，隐藏项目再次显示在其他组合栏中。

<select class="soma1">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>
<select class="soma2">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>
<script type="text/javascript">
$('.soma1').change(function () {
    var cm = $('.soma1').text();
    $('.soma2 option:contains(' + cm + ')').each(function () {
        if ($(this).text() == cm) {
            $(this).remove();
        }
    });
});
</script>

首先，您需要获取第一个选择框上选择的值，然后通过使用$.each()获取第二个选择框的所有子框，将其与第二个进行比较，然后隐藏/显示所有子框。考虑这个例子：样品Fiddle

<select class="soma1">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>
<select class="soma2">
    <option disabled selected>Select</option>
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var default_values = $('.soma2').children();
    $('.soma1').change(function () {
        var cm = $('.soma1').val();
        $('.soma2').html(default_values);
        $('.soma2').children().each(function(index, element) {
            // loop each children and compare
            if($(element).text() == cm) {
                $(this).remove();
            }
        });
        $('.soma2').prop('selectedIndex', 0); // reset selected value
    });
});
</script>

您也可以使用$('.soma1').find('option:selected').html()；

这是一把小提琴

<select class="soma1">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>
<select class="soma2">
   <option>item1</option>
   <option>item2</option>
   <option>item3</option>
   <option>item4</option>
</select>
<script type="text/javascript">
$('.soma1').change(function () {
    var selectedItem = $('.soma1').find('option:selected');
    $('.soma2').find('option').each(function(){
        if (selectedItem.html() != $(this).html()){
            $(this).remove();
        }
    });
});
</script>

而不是

var cm = $('.soma1').text();

使用

var cm = $('.soma1').val();

 <script>
 $( document ).ready(function() {
 $('select').change(function (evt) {
     var cm = $('.soma1').find("option:selected").val();
     $('.soma2 option').remove();
     $('.soma2').html($('.soma1').html());
     $('.soma2').find("option:contains("+cm+")").remove();
     });
 });
</script>

使用以下html

 <select class="soma1">
<option value="item1" >item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
</select>
<select class="soma2">
 <option value="item1" >item1</option>
<option value="item2">item2</option>
<option value="item3" >item3</option>
<option value="item4">item4</option>
</select>
相关文章：