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

Question

对不起(我不能写好英文!)我想在更改组合框选中项目时,此项目(所选项目)隐藏在其他组合框中,当再次更改时再选择隐藏项目显示在其他组合框中.

<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>

Answer 1

首先,您需要在第一个选择值,然后您需要通过使用$.each()所有子项获取第二个选择框的所有子项,将其与第二个进行比较,然后只需隐藏/显示.考虑这个例子:Sample 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>