jQuery Select2 placeholder doesn't work

Question

I am following this doc http://ivaynberg.github.io/select2/ to create select box with placeholder. My problem is the placeholder doesn't work. Can you help to fix this code?

Code: Also at http://jsfiddle.net/VwGGU/3/

HTML:

<select style="width:300px" id="source">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>
</select>

Javascript:

$("#e2").select2({
    placeholder: "Select a State",
    allowClear: true
});

The example above shows "Alaska" instead of "Select a State" as placeholder.

UPDATE 1:

Added select2.js now and empty option. It still doesn't show placeholder

HTML

<select style="width:300px" id="source" placeholder="testt test">
    <option></option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>

JS

$(document).ready(function () {
    $("#source").select2({
        placeholder: "Select a State",
        allowClear: true
    });
});

http://jsfiddle.net/VwGGU/6/

UPDATE 2:

Strange that jsfiddle gave error when I copied .css and .js link from github. This version works

HTML

<select style="width:300px" id="source" >
    <option></option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>

JS

$(document).ready(function () {
    $("#source").select2({
        placeholder: "Select a State",
        allowClear: true
    });
});

http://jsfiddle.net/VwGGU/9/

Delamare

You're not including the JavaScript code for the plugin; just the CSS. – Inobservance

I made a mistake copying from local code – Delamare

In my case it worked by adding multiple="" to the select tag. Then in the javascript I added the maximumSelectionLength: 1, option. Here is the updated fiddle working quite good but in my project it does work. – Agnate

Answer 1

Your select element have an id of source but you are targeting an id of e2 in your jQuery selector, and you need an empty <option> tag

Occlude

I just updated to insert empty option but it just shows that blank option instead of placeholder text. – Delamare

Answer 2

Have you done this:

When placeholder is used for a non-multi-value select box, it requires that you include an empty tag as your first option

Sismondi

Good suggestion, but until his test page is actually using the plugin code this change won't help :) – Inobservance

@Myles I've followed your suggestion, but I have not gotten this to work yet. Do you have a link to the source docs. I can't find this in the chosen manual. – Viddah

@Viddah can you please post your code online? Happy to help but hard to debug with out seeing code :) – Sismondi

@Myles I messed up, I was working with a different tool and forgot what I was up too. I was at the office too late. Please disregard. – Viddah

Answer 3

$selectElement.select2({
    minimumResultsForSearch: -1,
    placeholder: 'Select Relatives'
}).on('select2-opening', function() {
    $(this).closest('li').find('input').attr('placeholder','Select Relative');
});

Emmer

Answer 4

<select id="select2Box" class="form-control brand-select">
    <option value="">Select Franchise</option>
</select>

Zinkenite

Although this code might solve the problem, one should also explain how and why this helps. – Klausenburg

Answer 5

You should add an empty option tag to the select.

<select data-placeholder="Chose number" data-allow-clear="true" data-width="50%">
    <option></option>
    <option value="1">Number one</option>
    <option value="2">Number two</option>
    <option value="3">Number three</option>
</select>

Check this link Placeholder only works when there's an empty option element

Komsa

Answer 6

Try this.In html you write the following code.

<select class="select2" multiple="multiple" placeholder="Select State">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

And in your script write the below code.

<script>
         $( ".select2" ).select2( { } );
 </script>

Affixation

Answer 7

 <script>
         $( "#id").select2({ placeholder: "Select Franchise" });
 </script>

Zinkenite

Welcome to Stack Overflow, please take some time to follow the Stack Overflow tour and read about How do I write a good answer? – Alteration