Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chosen updating the placeholder text when dynamically populating options

I am using Chosen and I'm dynamically loading options via an AJAX call. Everything works fine but I can't figure out how to change the placeholder text if the result of the AJAX call is empty.

So for example:

<select name="test" multiple="multiple" data-placeholder="Make a selection" 
    id=MyChosenSel"></select>

When nothing has been selected the box has a placeholder which reads "Make A Selection". I want to have this say "No options available" if the AJAX call returns null.

I expected this to work:

$('#MyChosenSel').data('placeholder',"No Options").trigger("chosen:updated");

Any ideas?

like image 364
Alan A Avatar asked May 22 '15 17:05

Alan A


2 Answers

To change the text placeholder for the select you should use the placeholder_text option in the chosen config for example use this:

$("#myChosen").chosen({
   placeholder_text:"my custom placeholder text"
 });
like image 58
Yassine EL MALKI Avatar answered Sep 30 '22 06:09

Yassine EL MALKI


In Chosen 1.8.7 (possibly earlier, haven't tested it), the set_default_text function, called by the chosen:updated event handler, specifically checks the data-placeholder attribute, not the jQuery data (which is what .data("placeholder", ...) sets). So, this is what you have to do:

$("#MyChosenSel")
    .attr("data-placeholder", "No Options")
    .trigger("chosen:updated");
like image 23
adamjford Avatar answered Sep 30 '22 06:09

adamjford