javascript - 使用过滤功能匹配选项标签的文本

Question

我有两个选择框。在第一个选择框的更改事件中，我将该文本添加到第二个选择框中。但我不想添加重复的记录。为此，我正在使用过滤功能，(如果已经添加了任何文本，那么我不想再次添加)，但它没有按我想要的方式工作。

html

<select id="ddlCategory">
           <option value="0">Select Category</option>
           <option value="1">Category 1</option>
           <option value="2">Category 2</option>
           <option value="3">Category 3</option>
 </select>

<select multiple="multiple" id="my-select" name="my-select[]" class="multiDrop"> </select>

<select multiple="multiple" id="your-select" name="my-selectyour[]" class="multiDrop">

我的Js:

  $('#my-select').change(function () {
        var getValue = $(this).find('option:selected').val();
        var getText = $(this).find('option:selected').text();
        var getCategory = $('#ddlCategory').find('option:selected').text();
        if ($('#your-select > option').hasClass(getCategory)) {
            $("#your-select > option").filter(function (index) {
                if ($(this).html() == getText) {
                    return;
                }
                $('#your-select').append('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
            });


        } else {
            $('#your-select').html('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
        }
    });

Jsfiddle

Answer 1

给你...我编辑的 fiddle :http://jsfiddle.net/stoz1m6v/2/

这样就不会重复 myselect 中的条目...你在那里对类/类别进行了一些检查，我删除了它，因为我发现它做得不正确，但是我无法理解你到底想如何检查类别...

脚本是这样的......我只更改了 my-select 的更改处理程序:

    $('#my-select').change(function () {
        var getValue = $(this).find('option:selected').val();
        var getText = $(this).find('option:selected').text();
        var getCategory = $('#ddlCategory').find('option:selected').text();
        if ($("#your-select > option").filter(function (index) {
            return $(this).html() == getText; }).length ==0) { 
            $('#your-select').append('<option value="' + getValue + '" class="' + getCategory + '">' + getText +        '</option>');
        }

    });