我正在尝试开发一个涉及 2 个选择列表项的功能。

流程是这样的，

1. 有两个列表项（相同）具有相同的列表项
2. 当我选择一个选项时Main Tags列表，相同的选项Sub Tags列表应该被禁用。例如，如果我选择Tag 1来自Main Tags然后列出Tag 1来自Sub Tags列表应该被禁用。 （切换效果：当我从第一个列表中选择其他选项时，之前禁用的项目应该启用）
3. Sub Tags列表是多项选择。这里选定的值在其旁边显示为带有删除标签选项的标签（这在我的代码中起作用）。但是当用户更改选项时Main Tags列表，同样的东西已经在这里显示为Selected tags那么它应该从中删除selected tags部分和Sub Tags列表（此时已禁用）。

基本思想是两个选项下不要有相同的选项Main Tags and Sub Tags

希望我的问题很清楚。

这是我当前的代码，

$(function () {
    $("#tagSel").change(function () {
        $this = $(this);
        $("#tags").append('<span id="' + $this.val() + '"> ' + $this.find('option:selected').text() + ' <a href="#">&times;</a></span>');
        $this.find('option:selected').prop("disabled", true);
    });
    $("#tags").on("click", "span a", function () {
        $("#tagSel option[value='" + $(this).parent().attr("id") + "']").prop('disabled',null);
        $(this).parent().remove();
        $("#tagSel_main").append('<i ></i>')
    });
});

DEMO https://jsfiddle.net/4ktduf39/11/

我相信这可能会成功。

我对该函数进行了评论以阐明 if 的功能。

$('#tagSel_main').on('change', function() {
    /* find selected option */
    var selector = $(this).find(':selected').val();
    /* remove the disabled property from the active sub tag (if it exists) */
    $('.activeSubTag').removeClass('activeSubTag').prop('disabled', false );
    /* disable the now selected sub tag and give a class (for the above rule) */
    $('#tagSel option[value='+selector+']').addClass('activeSubTag').prop('disabled', true );
    /* remove the sub tag from "selected sub tags" (if it exists) */
    $('#tags span#'+selector).remove();
});

更新的小提琴 https://jsfiddle.net/4ktduf39/17/

EDIT

好像IE和Chrome不允许display:none在一个选项上。因此我发现[这个解决方法]](如何使用CSS隐藏菜单中的？ https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css).

其代码更改为：

 $('#tagSel_main').on('change', function() {
    var selector = $(this).find(':selected').val();
    $('.activeSubTag option').unwrap();
    $('#tagSel option[value='+selector+']').wrap('<span class="activeSubTag" style="display:none"></span>');
    $('#tags span#'+selector).remove();
});

更新的小提琴 https://jsfiddle.net/4ktduf39/30/