jquery-select2

#jquery-
select2
Tabla de contenido
Acerca de 1

Capítulo 1: Empezando con jquery-select2 2

Observaciones 2

Versiones 2

Examples 2

Jquery - Select2 Instalación y configuración 2

Para borrar los elementos seleccionados del menú desplegable Select2. 4

Capítulo 2: Cargando datos remotos en el cuadro Seleccionar o DropDown usando la opción Bu 5

Introducción 5

Examples 5

Creación de un menú desplegable / Seleccionar con Jquery - select2 en C # MVC 5

Cascada desplegable / cuadro de selección en Jquery - Select2 8

Capítulo 3: Usos select2 10

Introducción 10

Examples 10

Usando Select2 en un Bootstrap Modal / PopUp 10

Usando Select2 en un Bootstrap Modal / PopUp 10

Creditos 11
Acerca de
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: jquery-select2

It is an unofficial and free jquery-select2 ebook created for educational purposes. All the content is
extracted from Stack Overflow Documentation, which is written by many hardworking individuals at
Stack Overflow. It is neither affiliated with Stack Overflow nor official jquery-select2.

The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to [email protected]

https://riptutorial.com/es/home 1
Capítulo 1: Empezando con jquery-select2
Observaciones
Esta sección proporciona una descripción general de qué es jquery-select2 y por qué un
desarrollador puede querer usarlo.

También debe mencionar cualquier tema grande dentro de jquery-select2, y vincular a los temas
relacionados. Dado que la Documentación para jquery-select2 es nueva, es posible que deba
crear versiones iniciales de esos temas relacionados.

Versiones

Notas de la versión de Fecha de

Versión
enlace lanzamiento

4.0.3 (Actual) Select2 4.0.3 2016-05-27

4.0.2 Select2 4.0.2 2016-03-09

4.0.2 RC1 Select2 4.0.2-rc1 2016-02-14

4.0.1 Select2 4.0.1 2015-11-27

4.0.1 RC1 Select2 4.0.1-rc1 2015-11-10

3.5.4 Select2 3.5.4 2015-08-30

3.5.3 Select2 3.5.3 2015-08-20

** Las versiones anteriores se pueden

select2 / lanzamientos 2015-08-20
encontrar en:

Examples
Jquery - Select2 Instalación y configuración

Puede incluir / instalar Select2 de una de las dos formas

1. Uso directo de CDN en su proyecto en la sección de encabezado de su proyecto.

link href = " https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css " rel =

"stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"/>

https://riptutorial.com/es/home 2
 2. Descargue el código a su máquina local e inclúyalo en su proyecto. Debe tener un aspecto

como este

Luego incluye estas líneas en la sección principal de tu página html

<link href="select2.min.css" rel="stylesheet" />

<script src="select2.min.js"></script>

Nota: Debe tener Jquery incluido en su proyecto para que Select2 funcione
correctamente.

PITFALL: si la versión actual de jquery y Select2 están en conflicto o las funciones de

Select2 no funcionan. Luego mueva las variables select2 y las implementaciones en
un bloque separado del cuerpo del documento $ (documento) .ready (función () {// su
código select2 ...});

Cómo usarlo: Puede definir una <select> siguiente manera:

<select id="select2_example">
<option>Test</option>
</select>

Enfoque 1:

var _mSelect2 = $("#select_example").select2();

Enfoque2:

<script type="text/javascript">
$('select').select2();
</script>

Tenga en cuenta que al utilizar este enfoque, todo el control de selección de página
definido heredará las características de Select2. Si solo desea usar Select2 para
ciertos controles, omita este paso y escriba su propio código para usar la función
select2 directamente y la función jquery / javascript por separado para otros controles
de selección. Sin embargo, puede utilizar el valor de manipulado a través de Select2
para Jquery o viceversa.

Puede encontrar más ejemplos de 'Lo básico' en la documentación de Select2 GIT aquí

https://riptutorial.com/es/home 3
El proyecto Select2 GIT está aquí . Visite el sitio Select2 Github para conocer las características
detalladas de este producto.

Para borrar los elementos seleccionados del menú desplegable Select2.

Para borrar la selección de los valores que se seleccionan usando un Select2 desplegable Select2
, podemos usar la función empty ().

<select id="select2_example">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>

El menú desplegable se puede restablecer utilizando Jquery.

$("#select2_example").empty();

También se puede reiniciar como se muestra a continuación.

$("#select2_example").select2("val", "");

Lea Empezando con jquery-select2 en línea: https://riptutorial.com/es/jquery-

select2/topic/9515/empezando-con-jquery-select2

https://riptutorial.com/es/home 4
Capítulo 2: Cargando datos remotos en el
cuadro Seleccionar o DropDown usando la
opción Buscar
Introducción
Cuando el recuento de registros es demasiado alto, cargar todos los registros a la vez puede
hacer que la aplicación sea lenta y, además, al usuario no le gustará la idea de desplazar miles
de registros para encontrar lo que está buscando. Es mejor dar al usuario una búsqueda
poderosa y filtrar los registros a medida que escribe el carácter.

Examples
Creación de un menú desplegable / Seleccionar con Jquery - select2 en C #
MVC

Este ejemplo mostrará el cuadro de selección de búsqueda en MVC. utiliza Ajax para obtener
todos los registros de la base de datos a medida que el usuario escribe el nuevo carácter.
Consideraré País y su ejemplo de ciudad para ilustrar la funcionalidad del cuadro desplegable de
búsqueda. El código detrás es c # con MVC, pero es fácil de entender todo el concepto.

Primero he creado un fondo básico de manera sabia paso. Los últimos pasos es el método jqery
Select2 que ejecuta este código.

Paso 1: Declare DropDownListFor control in razor. Se crea un cuadro de selección en la marca

HTML.

La llamada Ajax utilizará la variable oculta "ajaxUrlGetAutoCompleteSearchSuggestion" en el

método de biblioteca Jquery - select2.

El campo Valor de variable oculta también contiene el método url.action de la biblioteca de

máquinas de afeitar. Tiene dos parámetros. El primer parámetro,
GetAutoCompleteSearchSuggestion es el método C #, que es el punto de entrada en el lado del
servidor para que la llamada Ajax recupere los registros. El segundo parámetro es el nombre del
controlador "País".

<h2>
<label>@Html.LabelFor(m => m.ddlCountry)</label>
@Html.DropDownListFor(m => m.ddlCountry, Model.Station, new { @class =
"select2Style" })
</h2>

<input type="hidden" id="ajaxUrlGetAutoCompleteSearchSuggestion"

value='@Url.Action("GetAutoCompleteSearchSuggestion", "Country")' />

https://riptutorial.com/es/home 5
Paso 2: Estas son clases CSS predefinidas disponibles para el cuadro de selección. Puedes
personalizar el control usando estas clases. Además puedes agregar tu propia clase css para
controles.

/* Input field */
.select2-selection__rendered { font-size:medium; font-weight:normal; }

/* Around the search field */

.select2-search { font-size:small; font-weight:normal; }

/* Search field */
.select2-search input { font-size:medium; font-weight:normal; }

/* Each result */
.select2-results {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight:normal;

/* Higlighted (hover) result */

.select2-results__option--highlighted { font-size:medium; font-weight:normal; }

/* Selected option */
.select2-results__option[aria-selected=true] {
background: #3ea211;
font-family: Arial, Helvetica, sans-serif;
font-size:medium;
font-weight:normal;
}

/* My css class*/
.select2Style {
width:200px;
}

Paso 3: Crea el modelo. Tenga en cuenta que el mismo nombre de variable está en la
declaración de afeitar.

[Display(Name = "Country:")]
public string ddlCountry { get; set; }
public IEnumerable<SelectListItem> Country { get; set; }

Paso 4: Cree el controlador "País" y el método C #, que será llamado por el método jquery ajax
cada vez que el usuario ingrese un texto en el cuadro de texto desplegable de búsqueda.

public ActionResult GetAutoCompleteSearchSuggestion(CountryQuery queryParameters)

{
string ErrorMessage = "success";
Dictionary<double, string> suggestions = new Dictionary<double, string>();

try
{
suggestions = GetCountryList( queryParameters.query);
}
catch (Exception Ex)

https://riptutorial.com/es/home 6
 {
ErrorMessage = Ex.Message;
return Json(ErrorMessage);
}
return Json(suggestions.Select(c => new { Name = c.Value, ID = c.Key }).ToList(),
JsonRequestBehavior.AllowGet);
}

Paso 5: Configure la consulta y la operación de la base de datos para obtener registros. Obtiene
la lista de país. tenga en cuenta la consulta de db, afecta la forma en que se obtiene y se muestra
el elemento del menú desplegable. Tendrá que personalizar su consulta para obtener el resultado
según su requerimiento.

public Dictionary<string, string> GetCountryList(string filterId)

{
Dictionary<string, string> ddlcountryDictionary = new Dictionary<string,
string>();
OracleDataReader reader = null;
OracleConnection oraConnection = new OracleConnection(oracleConnStr);
string firstItem = string.Empty;
try
{
oraConnection.Open();
string ddlQuery = "SELECT CountryId, countryName FROM tblCountry WHERE
UPPER(countryName) LIKE UPPER ('"+filterId+"%') ORDER BY 2 ASC";
oraCommand = new OracleCommand(ddlQuery, oraConnection);
reader = oraCommand.ExecuteReader();
string countryValue = "Select Item";
string countryId = -1;

if (reader.HasRows)
{
while (reader.Read())
{
countryId = reader[0].ToString();
countryValue = reader[1].ToString();
ddlcountryDictionary.Add(countryId, countryValue);
}
}
}
catch (Exception ex)
{

throw new Exception("No Country name Exists.");

}
finally
{
reader.Dispose();
oraCommand.Dispose();
oraConnection.Close();
}
return ddlcountryDictionary;
}

Paso 6: La función Jquery mostrará el nombre del país comenzando con el texto ingresado por el
usuario, si el usuario selecciona "a" , todo el país con el nombre "a" aparecerá en una lista y, a
continuación, si el usuario escribe "n" , el nombre del país no comenzará con "an" será filtrado.

https://riptutorial.com/es/home 7
 $("#ddlCountry").select2({
ajax: {
url: $("#ajaxUrlGetAutoCompleteSearchSuggestion").val(),
data: function (params) {
var queryParameters = {
//restrictedCountry: $("#resCountry").val(), // pass your own parameter

query: params.term, // search term like "a" then "an"

page: params.page
};
return queryParameters;
},
dataType: "json",
cache: true,
delay: 250,
//type: 'POST',
contentType: "application/json; charset=utf-8",
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: $.map(data, function (val, item) {
return { id: val.ID, text: val.Name };
}),
// if more then 30 items in dropdown, remaining set of items will be show
on numbered page link in dropdown control.
pagination: { more: (params.page * 30) < data.length }
};
}
},
minimumInputLength: 1 // Minimum length of input in search box before ajax call
triggers
});

Por favor, lea los diferentes ejemplos de Select2 en este sitio.

Cascada desplegable / cuadro de selección en Jquery - Select2

Esta es la continuación del ejemplo anterior.

Cascada DropDown para el nombre de la ciudad del país. Jquery llamará a este método cuando
el usuario haya terminado con la selección de país en el menú desplegable principal. He seguido
el concepto de MVC y proporcioné el enfoque básico para el desplegable en cascada.

Ajax llamará al método GetCityName en el código que se encuentra detrás del servidor y la
información recibida se usa recursivamente para crear el menú desplegable Ciudad.

Tenga en cuenta la sintaxis de Select2 para el menú desplegable en cascada.

$('#ddlCountry').on("select2:select", function (event) {

var countryParam =
{
"countryId": $("#ddlCountry option:selected").val()
};
$.ajax({
url: $("#ajaxUrlGetCityName").val(),
data: JSON.stringify({ ddlParams: countryParam}),
type: 'POST',

https://riptutorial.com/es/home 8
 cache: false,
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (result) {
var markup;
var dbSelect = $('#ddlCity');
dbSelect.empty();
for (var i = 0; i < result.length; i++) {
dbSelect.append($('<option/>', {
value: result.City[i].Value,
text: result.City[i].Text
}));
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
}
});
});

Lea Cargando datos remotos en el cuadro Seleccionar o DropDown usando la opción Buscar en
línea: https://riptutorial.com/es/jquery-select2/topic/10830/cargando-datos-remotos-en-el-cuadro-
seleccionar-o-dropdown-usando-la-opcion-buscar

https://riptutorial.com/es/home 9
Capítulo 3: Usos select2
Introducción
Select nunca funciona en Bootstrap Modal, siga los pasos dados para usar select2 en Bootstrap
Model.

Examples
Usando Select2 en un Bootstrap Modal / PopUp

Si está utilizando Bootstrap Modal , asegúrese de que se elimine Model tabindex = -1.

$('#targetId').select2({
width: '100%',
dropdownParent: $("#myModal")
})

Usando Select2 en un Bootstrap Modal / PopUp

Uso de Select2 en un Bootstrap Modal / PopUp Si está usando Bootstrap Modal, entonces
asegúrese de que el Modelo tabindex = -1 se haya eliminado.

$('#targetId').select2({ width: '100%', dropdownParent: $("#myModal") })

Lea Usos select2 en línea: https://riptutorial.com/es/jquery-select2/topic/9763/usos-select2

https://riptutorial.com/es/home 10
Creditos
S.
Capítulos Contributors
No

Empezando con Community, kumar chandraketu, Testing123, The_Outsider,

1
jquery-select2 Whiplash450

Cargando datos
remotos en el cuadro
2 Seleccionar o kumar chandraketu
DropDown usando la
opción Buscar

3 Usos select2 Ashiquzzaman, Dharmveer Singh, The_Outsider

https://riptutorial.com/es/home 11