修改

Question

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

Flow就是这样的，

有两个具有相同列表项的列表项（相同）
当我从var pictureCount = 0; $(window).load(function () { pictureCount += $(".thumbnail-container").length; $("#add-picture").toggle(pictureCount != 5); }); var removeAddButton = function (operator) { if (operator == "+") { pictureCount++; } else if (operator == "-") { pictureCount--; } $("#add-picture").toggle(pictureCount != 5); };列表中选择一个选项时，Main Tags列表中的相同选项将被禁用。例如，如果我从Sub Tags列表中选择Tag 1，那么Main Tags列表中的Tag 1将被禁用。（切换效果：当我从第一个列表中选择其他选项时，则应启用先前禁用的项目）
Sub Tags列表是多项选择。这里选择的值将作为带有删除标记选项的标记显示在它上面（这在我的代码中有效）。但是当用户从Sub Tags列表中更改选项时，同样的内容已在此处显示为Main Tags部分，那么它应该从Selected tags部分和selected tags列表中删除（这也是禁用的。）

基本理念不是在Sub Tags和Main Tags

希望我的问题很明确。

这是我目前的代码，

Sub Tags

DEMO

Answer 1

我相信这可能会成功。

我评论了这个函数，以阐明函数是如何实现的。

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

修改

似乎IE和Chrome不允许选项display:none。因此我发现[这个解决方法在SO]]（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();
});

UPDATED FIDDLE

Answer 2

尝试添加以下内容：

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

Answer 3

请找Demo

＆＃13;

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

＆＃13;

* {  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;
}

＆＃13;

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

＆＃13;

Answer 4

只需添加此更改

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

参见Fiddler更新

https://jsfiddle.net/kubkzytz/

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

4 个答案:

修改