Question

用户需要在下拉菜单中禁用每个选择选项。

现在，下面的代码在下拉列表中仅禁用值为“ red”的值，因为我将value =“ red”进行了硬编码。我如何让它抓住用户选择并仅禁用该选择？

（更新的代码段）

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

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

这假定您只希望禁用当前选择的选项，而要启用所有其他选项。如果不正确，请在评论中注明您的确切需求。

Answer 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()方法分别处理每个。

Answer 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);
          }

      });

多选下拉列表：仅禁用所选选项（jQuery）

3 个答案: