select2: programmatically controlling placeholder

Question

I want to change the placeholder on a select2 enhancing control upon an event.

So I've got this...

<select id="myFoo" placeholder="Fight some foo...">

...which is then enhanced:

init: function(){
   $('#myFoo').select2();
},

...so now it has its correct placeholder.

But then I want it to react to an event and clear the placeholder...

someButtonPress: function(){
//   $('#myFoo').placeholder("");
//   $('#myFoo').attr('placeholder', "");
//   $('#myFoo').select2('placeholder',"");
//   $('#myFoo').select2({placeholder:""});
//   none of these work
}

This seems so basic, yet I'm stumped.

I can't find anything in the docs. Am I looking in the wrong place?

Gerger

have you tried removing placeholder from your html and setting it with $('#myFoo').select2('placeholder',"Fight some foo...")', then you might be able to clear it with the same function – Morganite

Well, that puts my text in JavaScript, instead of in the HTML... – Gerger

This is how I ended up kludging it: $('#myFoo').parents('td').find('a.select2-default span').html(''); :P – Gerger

I've submitted a ticket for this: github.com/ivaynberg/select2/issues/2807 – Bonaventura

Answer 1

Update

If you've set placeholder via HTML data-placeholder attribute, you need to change it and not the internal option, so it will look as Fabian H. suggests:

$select.attr("data-placeholder", "New placeholder text");
$select.data("select2").setPlaceholder();

Or if not, use an internal option select2.opts.placeholder:

var select2 = $select.data("select2");
select2.opts.placeholder = "New placeholder text";
select2.setPlaceholder();

This is not perfect of course, but way better than hacking select2 generated HTML.

1. this.$select.data("select2") gets you the internal select2 object, so you get access to its properties and methods (not only to those exported for use from outside)
2. Next I'm updating the placeholder internal option or changing the related data attribute
3. Finally I'm triggering internal method setPlaceholder that sets the new placeholer.

Hope that helps!

Marvellamarvellous

For the internal option update method, although the posted answer presumably works for single-select controls, but it did not work for my multi-select control (at least with Select2 3.3.x). To do it for the multi-select version, I ended up needing to call select2.clearSearch() instead of select2.setPlaceholder(). – Bijugate

Answer 2

if you want to dynamically change the placeholder, don't set it on HTML

<select id="myFoo">

set it on jQuery

$('#myFoo').select2({
   placeholder: "your placeholder"
});

then update it like this

someButtonPress: function(){
$('#myFoo').select2({
    placeholder: "change your placeholder"
  });
}

it works for me, hope it helps.

Selfcontent

Works, but the problem with this method is that you have to re-specify all the properties (eg: tags, etc) – Sepulveda

Answer 3

Neither of those options worked for me in the latest version of Select2 (4.0.13) with a multiple select as the placeholder was indeed a search input. This finally worked:

$.fn.setSelect2Placeholder = function (placeholder) {
    $(this).data('select2').selection.placeholder.text = placeholder;
    $(this).trigger("change");
};

With that function I can update the placeholder of the select calling the function setSelect2Placeholder

Billetdoux

Answer 4

To update the placeholder of a Select2 with remote data (AJAX/JSONP) use this code:

$input = $("input#e7");
$input.attr("data-placeholder", "New placeholder");
var select2 = $input.data("select2");
select2.setPlaceholder();

Credits to Brocks response.

Iosep

Turned out my option tweaking doesn't work for html specified placeholders, thanks for your input. – Marvellamarvellous

Answer 5

Another way to update the placeholder is to set the "placeholder" attribute on the select element, and call select2() again:

$('#IdForSelectElement').attr('placeholder', 'New Placeholder Text').select2();

Just remember that if you passed any options to select2 the first time, you will need to pass them in again (or just set up default options using $.fn.select2.defaults).

Friedman

Answer 6

I'm using Select2 4.0.5 Standard and the existing solutions either didn't work for me or required recreating the select2 for every placeholder update, which I wanted to avoid.

I came up a new solution, even if it is a hack. I store the select2 container to easily access it later, then when I need to update the placeholder I find the placeholder element within the container and update its text:

var selectorSelect2 = $('#selector').data('select2').$container;
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 1');
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 2');

Detonation

Answer 7

I believe the behavior is going to depend on which version of Select2 you are using – we are using v3.5.1 – but I had to take a slightly different approach to get the placeholder to change on demand. In my case, the selector changes options presented based on the value of another selector, which means the placeholder needs to change with the new data set.

To get this to work, I had to remove any references to a placeholder in the HTML input element.

<input type="text" class="form-control span10">

Then, in the Javascript, whenever I loaded the element with the correct options, I had to update the placeholder via the data() function:

selector.data('placeholder', placeholder);
selector.select2({ data: new_data_set, tags: true });

That seems to work every time now.

Trajectory

Answer 8

If you are also modifying options dynamically, you'll need to en-queue an additional empty option for the placeholder to take effect. For example:

response.unshift({id: '', text: ''});
$('#elem).select2({placeholder: 'Select..', data: response}); 

Decurved