相同的选择菜单列表项切换 [英] Identical Select menus list item toggle

问题描述

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

流程就像这样，

1. 有两个列表项目（相同）与相同的列表项目


2. 当我从 Main Tags code>列表中， Sub Tags 列表中的相同选项应禁用。例如，如果我从主标签列表中选择标签1 ，然后标签1 子标签列表中的code>应该被禁用。 （切换效果：当我从第一个列表中选择其他选项时，以前禁用的项目应该启用）

3. 子标签列表是多选。在这里，选定的值被显示为一个带有删除标记选项的标记（在我的代码中工作）。但是，当用户从主标签列表中更改选项时，同样的东西已经在这里显示为所选标签部分那么它应该从选定标记部分和子标记列表（此时禁用）。



主要标签和小标签

希望我的问题很清楚。

这里是我当前的代码，

  $（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（点击，跨度，功能（）{
 $（＃tagSel选择prop（'disabled'，null）;（）;} 
 $（this）.parent（）。remove（）; 
 $（＃tagSel_main）。append（'< i>< / i>）
}）; 
}）; 
  

DEMO

解决方案

我相信这可能会起到诀窍的作用。 / p>

我已经评论了函数来澄清如何函数。

$ b $

  $（'＃tagSel_main'）on（'change'，function（）{
 / * find selected选项* / 
 var selector = $（this）.find（'：selected'）。val（）; 
 / *从激活的子标记中删除禁用的属性（如果存在）* / 
 $（'。activeSubTag'）。removeClass（'activeSubTag'）。prop（'disabled'，false）; 
 / *禁用现在选择的子标签并给出一个类（用于上述规则）* / 
 $（'＃tagSel option [value ='+ selector +']'）。addClass（'activeSubTag'）。prop（'disabled'，true）; 
 / *将子标签从 （如果存在的话）* / 
 $（'＃tags span＃'+ selector）.remove（）; 
}）; 
  

UPDATED FIDDLE

编辑

IE和Chrome不允许在选项上显示 display：none 。因此，我发现[这个解决方法]]（如何在&CSS;< select>菜单中隐藏< option> ）。

代码变为：

$ （'change'，function（）{
var selector = $（this）.find（）;
$ b

  $（'＃tagSel_main'）。 （'：selected'）。val（）; 
 $（'。activeSubTag option'）。unwrap（）; 
 $（'＃tagSel option [value ='+ selector +']'）。wrap （'< span class =activeSubTagstyle =display：none>< / span>'）; 
 $（'＃tags span＃'+ selector）.remove（）; 
}）; 
  

更新FIDDLE

I am trying to develop a feature which involves 2 select list items.

Flow goes something like this,

1. There are two list items (identical) with the same list items
2. When I select an option from Main Tags list, the same option in Sub Tags list should get disabled. For example, If I select Tag 1 from the Main Tags list then Tag 1 from the Sub Tags list should get disabled. (Toggle effect: when I select other options from the 1st list, then previously disabled item should b enabled)
3. Sub Tags list is multiple selection. Here selected values gets displad nex to it as a tags with delete tag option on it (Which is working in my code). But When user change the option from Main Tags list and the same thing is already been displayed here as a Selected tags section then it should get removed from selected tags section and Sub Tags list (Which is disable at this point) as well.

Basic idea is not to have same option under both Main Tags and Sub Tags

Hope my question is clear.

Here is my current code,

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

解决方案

I believe that this might do the trick.

I've commented the function to clarify how if functions.

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

UPDATED FIDDLE

EDIT

It seemed that IE and Chrome don't allow display:none on an option. Therefor I found [this workaround on SO]](How to hide a <option> in a <select> menu with CSS?).

Code therefor changes to:

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

UPDATED FIDDLE

这篇关于相同的选择菜单列表项切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！