Opción de selección múltiple Menú de selección

Descripción

Incluya multiple = "multiple" en los elementos <select> para hacer varias opciones seleccionadas en la vista de lista personalizada.

Ejemplo

El siguiente ejemplo demuestra el uso de la opción de selección múltiple en el menú de selección en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <h2>Multiple Select Option Value Example</h2>
      <div class = "ui-field-contain">
         <label for = "select-custom">Custom Select</label>
         
         <select id = "select-custom" multiple = "multiple" data-native-menu = "false">
            <option value = "mu">Mumbai</option>
            <option value = "pu" selected = "selected">Pune</option>
            <option value = "be" selected = "selected">Belgaum</option>
            <option value = "ch">Chennai</option>
            <option value = "ban">Bangalore</option>
         </select>
         
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código html anterior como selectmenu_custom_multiple_select.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/selectmenu_custom_multiple_select.html y se mostrará el siguiente resultado.