相同的选择菜单列表项切换

Identical Select menus list item toggle

本文关键字：列表 菜单 选择      更新时间：2023-09-26

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

流程是这样的，

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

基本思想是在Main Tags和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>')
    });
});

我相信这可能会成功。

我已经注释了这个函数，以澄清它是如何工作的。

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

更新小提琴

<标题>编辑

似乎IE和Chrome不允许display:none选项。因此，我找到了[这个解决方案][如何隐藏一个<选项>]在

代码改为:

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

更新小提琴

尝试添加如下内容:

$("#tagSel_main").change(function () {
    var mainSel = $(this);
    $("#tagSel option").prop('disabled',null);
    $( "#" + mainSel.val() ).remove();
    $("#tagSel option[value='" + mainSel.val() + "']").prop("disabled", true);
    $("span").each( function() {
        $("#tagSel option[value='" + $(this).attr("id") + "']").prop("disabled", true);
    })
})

请查找Demo

$(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>')
	});
});
var currentMainTag = $('#tagSel_main').val(); 
$('#tagSel_main').change(function(){
    $('#tagSel option[value="'+currentMainTag+'"]').prop("disabled", false);
    currentMainTag = $(this).val(); 
    var textSe = $(this).find('option:selected').text();
	$('#tagSel option[value="'+currentMainTag+'"]').prop("disabled", true);
});
* {  font-family: 'Segoe UI';  font-size: 10pt;}
body > div{  display:inline-block; width:20%; vertical-align:top ;  height:100px;  background-color: bisque;  padding: 10px;}
.sub_tags{display:inline-block; width:60%;     background-color: bisque; padding: 10px;}
.sub_tags > div {width:40%; display:inline-block; vertical-align:top}
.tags {   display:inline-block;   width:100%}
.tags p {  margin: 0;}
.tags span {
  display: inline-block;
  padding: 3px 9px;
  background: #E4E4E4;
  border: solid 1px #A0A054;
  border-radius: 5px;
  margin:5px 
}
.tags span a {
  color: red;
  text-decoration: none;
  background-color: white;
  padding: 2px 5px;
  border-radius: 16px;
  font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>Main Tag:</span><br/>
<select id="tagSel_main">
  <option value="tag1">Tag 1</option>
  <option value="tag2">Tag 2</option>
  <option value="tag3">Tag 3</option>
  <option value="tag4">Tag 4</option>
  <option value="tag5">Tag 5</option>
</select>
</div>
<div class="sub_tags">
<div>
<span>Sub Tag:</span><br/>
<select id="tagSel" multiple>
  <option value="tag1">Tag 1</option>
  <option value="tag2">Tag 2</option>
  <option value="tag3">Tag 3</option>
  <option value="tag4">Tag 4</option>
  <option value="tag5">Tag 5</option>
</select>
</div>
<div>
    Selected Sub Tags:<br/>
<div class="tags">
  <p id="tags"></p>
</div>
</div>
</div>

Add This Changes

$("#tagSel_main").change(function () {
    $("#tagSel option").each(function(){
    if($this.val()==$(this).val()){
     $(this).prop("disabled", true);
     }else{
     $(this).prop("disabled", false);
}});

参见Fiddler Update

https://jsfiddle.net/kubkzytz/

相关文章：