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

时间:2014-08-19 13:32:15

标签: javascript jquery

我有两个选择框。在第一个选择框的更改事件中,我将该文本添加到第二个选择框中。但是我不想添加重复记录。因为我使用过滤功能,(如果有任何文字已经添加,那么我不想再添加)但是它不是没有像我想的那样工作。

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

myJs:

  $('#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

1 个答案:

答案 0 :(得分:2)

这里你去...我的编辑小提琴: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>');
        }

    });