1

I have a select2 dropdown with a few values (let's say colors), and I want to remove from the dropdown list the current selected item. For example, if all the options are

white, green, red, blue

and the current selected item is white, if the user clicks on the dropdown, he'll only see the other 3 colors (green, red and blue).

Now, I can easily remove the currently selected item with jquery, and restore it back on change, but that really doesn't feel clean.

Is there any built-in method for doing that, or at least a method that is a little bit more "cleaner"?

1

4 Answers 4

1

Remove An options:

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

Add an options:

$("#selectBox").append('<option value="greed">Green</option>');
1
  • There is one little problem with that. I have an on.("change", function()....); binding to the dropdown, but as soon as I remove one of the elements of the dropbox, that event stops firing when I select a new value. How can I fix that? Jan 20, 2015 at 20:24
0

use .hide() to hide it or use a custom class with display: none; and add it to the option.

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

For cross-browser support, disable it instead of hiding it.

$(".selector option[value=white]").prop("disabled", true)
4
  • hiding options is not cross browser compatible Jan 20, 2015 at 10:34
  • @billyonecan I thought only handheld devices doesn't support hiding options.
    – Ciccolina
    Jan 20, 2015 at 10:35
  • Regardless, select2 is not using options elemnt to display it's options it uses ul and li elements to build options
    – Vladimirs
    Jan 20, 2015 at 10:37
  • Hiding the element doesn't work inn Chrome (just tested), and I want to completely hide it, not disable it, so the second way is a no-no. I'll have to go @Dhru 'soni's way and actually remove and append the items. Jan 20, 2015 at 10:49
0

You can use :selected from the jQuery library.

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

You can use the templateResult option to customize options you see in the dropdown. This can also be used if there are certain options you don't want to display.

You pass a javascript function as the value of the templateResult option. Example:

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

Before calling .select2() on your select element, you first need to define the formatColorOption() javascript method. Example:

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

To see a fancy example that combines TemplateResult with some other options, check out the JSFiddle. https://jsfiddle.net/vatdoro/4xu6vcc5/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.