El marcador de posición jQuery Select2 no funciona

5 minutos de lectura

Avatar de usuario de HP.
HP.

estoy siguiendo este documento http://ivaynberg.github.io/select2/ para crear un cuadro de selección con placeholder. mi problema es 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 vez de “Selecciona un Estado” como marcador de posición.

ACTUALIZACIÓN 1:

Adicional select2.js ahora y vacío option. todavía no aparece 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 diera un error cuando copié el enlace .css y .js de github. Esta versión 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/

  • No está incluyendo el código JavaScript para el complemento; solo el CSS.

    – Puntiagudo

    6 de febrero de 2014 a las 23:06

  • Cometí un error al copiar del código local

    – CV.

    6 de febrero de 2014 a las 23:43

  • En mi caso funcionó agregando multiple="" hacia select etiqueta. Luego en el javascript agregué el maximumSelectionLength: 1, opción. Aquí está la actualización violín funcionando bastante bien, pero en mi proyecto sí funciona.

    – Patros

    30 de septiembre de 2015 a las 18:03

Avatar de usuario de mylesthe.dev
mylesthe.dev

Has hecho esto:

Cuando se usa un marcador de posición para un cuadro de selección sin valores múltiples, se requiere que incluya una etiqueta vacía como su primera opción

  • Buena sugerencia, pero hasta que su página de prueba realmente use el código del complemento, este cambio no ayudará 🙂

    – Puntiagudo

    6 de febrero de 2014 a las 23:09

  • @Myles Seguí tu sugerencia, pero aún no he logrado que esto funcione. ¿Tiene un enlace a los documentos de origen. No puedo encontrar esto en el manual elegido.

    – usumoio

    18/09/2014 a las 21:13

  • @usumoio, ¿puede publicar su código en línea? Feliz de ayudar pero difícil de depurar sin ver el código 🙂

    – mylesthe.dev

    19 de septiembre de 2014 a las 9:57

  • @Myles Me equivoqué, estaba trabajando con una herramienta diferente y también olvidé lo que estaba haciendo. Estuve en la oficina demasiado tarde. Por favor hacer caso omiso de.

    – usumoio

    19 de septiembre de 2014 a las 14:58

Avatar de usuario de Pierre
Pedro

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

  • Acabo de actualizar para insertar vacío option pero solo muestra esa opción en blanco en lugar del texto de marcador de posición.

    – CV.

    6 de febrero de 2014 a las 23:43

Avatar de usuario de Amar Jagtap
Amar Jagtap

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

Avatar de usuario de Malladi Bhaskar
Malladi Bhaskar

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

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>

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

Avatar de usuario de Raham
Raham

Prueba 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 secuencia de comandos, escriba el siguiente código.

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

avatar de usuario de bfontaine
bfontaine

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

  • Bienvenido a Stack Overflow, tómese un tiempo para seguir el recorrido de Stack Overflow y leer sobre ¿Cómo escribo una buena respuesta?

    – Dipiks

    19 de enero de 2017 a las 13:06

¿Ha sido útil esta solución?