How can I set placeholders first and not the default value in Select2

I have this HTML code here:

<select class = "select2" style = "width:100%" id = "selectme">
     <option value = "oldest"> Person 1</option>
     <option value = "oldest"> Person 2</option>
     <option value = "oldest"> Person 3</option>
</select>

And Jquery for Select2 here:

$("#selectme").select2({
    placeholder: "Assign to:",
    allowClear:true
});

The example in Select2 Documentation works with setting placeholder as the default value first. But in my case the default value is Person 1 and not the placeholder. Why?

How can I set placeholders first and not the default value in Select2

I have this HTML code here:

<select class = "select2" style = "width:100%" id = "selectme">
     <option value = "oldest"> Person 1</option>
     <option value = "oldest"> Person 2</option>
     <option value = "oldest"> Person 3</option>
</select>

And Jquery for Select2 here:

$("#selectme").select2({
    placeholder: "Assign to:",
    allowClear:true
});

The example in Select2 Documentation works with setting placeholder as the default value first. But in my case the default value is Person 1 and not the placeholder. Why?

• javascript
• jquery
• html
• jquery-select2

3 Answers 3

For placeholders to work properly you need a empty option to be added to the select list like:

<select class="select2" style="width:100%" id="selectme">
    <option value=""></option>
    <option value="oldest">Person 1</option>
    <option value="oldest">Person 2</option>
    <option value="oldest">Person 3</option>
</select>

FIDDLE DEMO

html

<select class="select2" style="width:100%" id="selectme">
    <option value=""></option>
    <option value="oldest">Person 1</option>
    <option value="oldest">Person 2</option>
    <option value="oldest">Person 3</option>
</select>

jquery

$(".select2").select2({             
     placeholder: "change your placeholder"               
});

Your html code does't seems right if its the original code you are not closing the tag:

<select class = "select2" style = "width:100%" id = "selectme"> 
 <option value = "oldest"> Person 1</option>
 <option value = "oldest"> Person 2</option>
 <option value = "oldest"> Person 3</option>
</select>