Не показывать выбранный элемент в выпадающем списке

Question

У меня есть выпадающий список select2 с несколькими значениями (скажем, цветов), и я хочу удалить из выпадающего списка текущий выбранный элемент. Например, если все варианты

white, green, red, blue 

и текущий выбранный элемент white, если пользователь нажмет на выпадающем списке, он будет видеть только другие 3-х цветов (green, red and blue).

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

Есть ли какой-либо встроенный метод для этого, или, по крайней мере, метод, который немного более «чище»?

Answer 1

использовать .hide(), чтобы скрыть его или использовать пользовательский класс с display: none; и добавить его в опцию.

$(".selector option[value=white]").hide() 

Для поддержки кросс-браузера отключите его, а не скрывайте.

$(".selector option[value=white]").prop("disabled", true) 

Answer 2

удалить параметры:

$("#selectBox option[value='White']").remove(); 

Добавить опции из:

$("#selectBox").append('<option value="greed">Green</option>'); 

Answer 3

Вы можете использовать: выбранный из библиотеки JQuery.

("select") 
    .change(function() { 
    var str = ""; 
    $("select option:selected").each(function() { 
    (select option:selected).text() = " "; 
}); 

Answer 4

Вы можете использовать опцию templateResult для настройки параметров, которые вы видите в раскрывающемся списке. Это также можно использовать, если есть определенные параметры, которые вы не хотите отображать.

Вы передаете функцию javascript как значение параметра templateResult. Пример:

$('#color').select2({ 
    templateResult: formatColorOption 
}); 

Перед вызовом .select2() на вашем выбор элемента, сначала необходимо определить formatColorOption() яваскрипт метода. Пример:

function formatColorOption (color) { 
    if (!color.id) { return color.text; } 
    // this next line prevents the currently selected option from showing up in the dropdown list 
    if ($('#color').find(':selected').val() == color.element.value) { return null; } 
    // otherwise display the name of the color 
    return color.text; 
}; 

Чтобы увидеть причудливый пример, который сочетает в себе TemplateResult с некоторыми другими вариантами, проверьте JSFiddle. https://jsfiddle.net/vatdoro/4xu6vcc5/