javascript - bootstrap - jQuery Select2 marcador de posición no funciona

select2 size

Question

Estoy siguiendo este documento http://ivaynberg.github.io/select2/ para crear un cuadro de selección con placeholder . Mi problema es que el placeholder no funciona. ¿Puedes ayudar a arreglar este código?

Código: También en 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
});

El ejemplo anterior muestra "Alaska" en lugar de "Seleccionar un estado" como marcador de posición.

ACTUALIZACIÓN 1:

Se agregó select2.js ahora y option vacía. Todavía no muestra 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/

ACTUALIZACIÓN 2:

Es extraño que jsfiddle haya dado un error cuando copié el enlace .css y .js desde github. Esta version funciona

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/

Answer 1

Debe agregar una etiqueta de opción vacía a la selección.

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

Marque este enlace El marcador de posición solo funciona cuando hay un elemento de opción vacío

Answer 2

Has hecho esto:

Cuando se utiliza el marcador de posición para un cuadro de selección sin valor múltiple, requiere que incluya una etiqueta vacía como su primera opción

Answer 3

Intenta esto. En html escribes el siguiente código.

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

Y en su guión escriba el siguiente código.

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

Answer 4

Su elemento select tiene un ID de source pero está apuntando a un id de e2 en su selector de jQuery, y necesita una etiqueta de <option> vacía

Answer 5

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

Answer 6

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

Answer 7

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