jquery - tag - Cómo utilizar el marcador de posición como valor predeterminado en el marco select2

select2 placeholder

Question

Para obtener el valor elegido de un select2 estoy usando:

var x = $("#select").select2(''data'');
var select_choice = x.text

El problema es que arroja un error si no se ha seleccionado un valor y me preguntaba si había alguna forma de hacerlo devolver el marcador de posición si no se selecciona ninguna opción

Answer 1

Debe agregar una opción vacía (es decir, <option></option> ) como primer elemento para ver un marcador de posición.

De la documentación oficial de Select2:

"Tenga en cuenta que debido a que los navegadores suponen que el primer elemento de opción está seleccionado en cuadros de selección sin valor múltiple, se debe proporcionar un primer elemento de opción vacío ( <option></option> ) para que el marcador de posición funcione".

Espero que esto ayude.

Ejemplo:

<select id="countries">
    <option></option>
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Spain</option>
</select>

y el Javascript sería:

$(''#countries'').select2({
    placeholder: "Please select a country"
});

Answer 2

Esto funcionó para mí:

<select class="select2" placeholder = "">
    <option value="1">red</option>
    <option value="2">blue</option>
</select>

Espero que esto ayude :)

Answer 3

Hice lo siguiente:

var realOption = new Option("Option Value", "id");
realOption.selected = false;    
$(".js-select2").append(realOption);

Para otras opciones que uso entonces:

$(''#SelectListId'').prepend(''<option selected></option>'').select2({
    placeholder: "Select Month",
    allowClear: true
});

Answer 4

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 script, escriba el siguiente código. Tenga en cuenta que tiene el enlace de select2js.

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

Answer 5

La forma más sencilla de agregar "opción" vacía antes de todo.

<option></option>

Ejemplo:

<select class="select2" lang="ru" tabindex="-1">
    <option></option>
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

También código js, ​​si necesitas:

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

Answer 6

Pon esto en tu archivo de script:

$(''select'').select2({
    minimumResultsForSearch: -1,
    placeholder: function(){
        $(this).data(''placeholder'');
    }
});

Y luego en HTML, agregue el siguiente código:

<select data-placeholder="Your Placeholder" multiple>
    <option></option> <------ this is where your placeholder data will appear
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
    <option>Value 5</option>
</select>

Answer 7

Use un marcador de posición vacío en su html como:

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

y en su script use:

var defaultOption = new Option();
defaultOption.selected = true;    
$(".js-select2").append(defaultOption);

Answer 8

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

El marcador de posición se puede declarar mediante un atributo de marcador de posición de datos adjunto a la selección, o mediante el elemento de configuración del marcador de posición como se ve en el código de ejemplo.

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

Opcionalmente, está disponible un botón de borrado (visible una vez que se realiza una selección) para restablecer el cuadro de selección al valor de marcador de posición.

https://select2.org/placeholders

Answer 9

$(''#ddlSelect'').prepend(''<option></option>'').select2({placeholder: "Select Month"});

Answer 10

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