Multi-Select DropDown: отключить только выбранную опцию (jQuery) - PullRequest
0 голосов
/ 23 января 2019

Мне нужно отключить каждый параметр выбора в раскрывающемся списке при выборе пользователем этого параметра.

Прямо сейчас приведенный ниже код отключает только значения со значением "red" в раскрывающемся списке, поскольку у меня есть значение = "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();
        }
      });

Ответы [ 3 ]

0 голосов
/ 23 января 2019

Если вы хотите придерживаться 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() обрабатывает каждый из них в отдельности.

0 голосов
/ 24 января 2019

Спасибо всем за помощь SO сообщества!

Это позволило мне найти следующее решение для выпадающего списка с множественным выбором, в котором каждый выбранный элемент выше выбранного, а каждый выбранный элемент отключен в раскрывающемся списке..

Вот скрипка, которая работает полностью с 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);
          }

      });
0 голосов
/ 23 января 2019

Это очень просто в ванильном 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>

Предполагается, что вы хотите, чтобы только выбранная опция была отключена, а все остальные включены.Если это не правильно, пожалуйста, оставьте комментарий с указанием, что именно вам нужно.

...