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

Versión Notas de la versión de enlace Fecha de 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 encontrar en: select2 / lanzamientos 2015-08-20

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"/>
 
  1. Descargue el código a su máquina local e inclúyalo en su proyecto. Debe tener un aspecto como este introduzca la descripción de la imagen aquí

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í

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", "");