Multi-Select DropDown：仅禁用所选选项（jQuery）答案

【问题标题】：Multi-Select DropDown: Disable selected option only (jQuery)Multi-Select DropDown：仅禁用所选选项（jQuery）
【发布时间】：2019-06-17 10:10:32
【问题描述】：

当用户选择它时，我需要禁用下拉列表中的每个选择选项。

现在下面的代码只禁用下拉菜单中值为“red”的值，因为我硬编码了 value="red,"。我如何让它抓住用户的选择并仅禁用该选择？

（更新的 sn-p）

 $(".mutliSelect select").on("change", function() {
    
        var displayTitle = $(this).val() + "";
        
        if ($(this).is(":selected")) {
          $(".hida").show();
        } else {

        $("option[value*='red']").prop('disabled',true);
         
        var p_elem = $("<span />")
            .attr("class", "categoryBubble")
            .attr("title", displayTitle)
            .text(displayTitle);
    
        var other_span = $("<span />")
            .on("click", foo)
            .addClass("Xout")
            .text("x");

          $(p_elem).append(other_span);
          $(".multiSel").append(p_elem);

          $(".hida").hide();
        }
      });

【问题讨论】：

this 在$(this).is(":selected") 的上下文中是<select>，不是一个选项，所以这没有意义。
另外，var title 的初始设置完全被title = $(this).val() + ""; 覆盖，所以这是一个逻辑错误
感谢所有帮助...我能够创建一个多选/下拉菜单来禁用所选的每个选项。这是小提琴jsfiddle.net/chaser7016/sghv4fz7/12

标签： jquery disabled-control

【解决方案1】：

这在原生 Javascript 中非常简单：

select.addEventListener('change', function() {
  for (let option of this.querySelectorAll('option')) {
    option.disabled = [...this.selectedOptions].includes(option)
  }  
})

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

这假设您只希望禁用当前选择的选项，并启用所有其他选项。如果这不正确，请留下评论，说明您究竟需要什么。

【讨论】：

谢谢！根据您的反馈和上面的反馈，我非常接近在 jQuery 中解决这个问题。坚持如何正确格式化以下 $('option="' + displayTitle + '"').prop('disabled',true);
为什么要用 jQuery 让事情复杂化？原生 API 看起来干净多了。

【解决方案2】：

如果你想坚持使用 jQuery，这里有另一个简单的解决方案（参见fiddle）：

$('select').on('change', function() {
    var colors = [];
    
    $.each($(".colors option:selected"), function(){
    	$(this).prop('disabled', true);
	    $('.selected').append($(this).val(), ', ');
    });
    
    $('.selected').append('<br/>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="colors" multiple="multiple" size="8">
    <option>black</option>
    <option>red</option>
    <option>green</option>
    <option>blue</option>
    <option>white</option>
    <option>purple</option>
    <option>orange</option>
    <option>yellow</option>
</select>

<div class="selected"></div>

请注意，要从所选选项本身获取值，您需要$(".colors option:selected")。

另外请注意，您不能假设一次只会选择一个选项。 $.each() 方法分别处理每一个。

【讨论】：

【解决方案3】：

感谢 S.O. 的所有帮助。社区！

它允许我为多选下拉列表提出以下解决方案，该下拉列表显示选择上方的每个选定项目，并且在下拉列表中禁用每个选定项目。

这里是它与 HTML、CSS 和下面的 JS https://jsfiddle.net/chaser7016/sghv4fz7/12/一起工作的小提琴@

$(".mutliSelect select").on("change", function() {
    
        var displayTitle = $(this).val() + "";
        
        $('option[value="' + displayTitle + '"]').prop('disabled',true);
         
        var p_elem = $("<span />")
            .attr("class", "categoryBubble")
            .attr("title", displayTitle)
            .text(displayTitle);
    
        var other_span = $("<span />")
            .on("click", foo)
            .addClass("Xout")
            .text("x");

          $(p_elem).append(other_span);
          $(".multiSel").append(p_elem);

          $(".hida").hide();

          function foo() {
            $(this).parent().remove();
            $('option[value="' + displayTitle + '"]').prop('disabled', false);
          }

      });

【讨论】：