Tengo múltiples opciones de selección que tienen diferentes clases y nombres y estoy usando la biblioteca de selección para permitir que el usuario busque. Quiero obtener los valores seleccionados al hacer clic en un botón. En este momento, he probado el siguiente código
$(window).bind("load", function() { var selectize_search_1 = $('.selectize_search_1').selectize( { sortField: 'text' }); }); function fetch_cars() { var cars_value = $('.selectize_search_1')[0].selectize.items; alert (cars_value); } <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script> <select class="selectize_search_1" name="cars[]" required> <option value="">Select Car</option> <option value="C1">Car 1</option> <option value="C2">Car 2</option> <option value="C3">Car 3</option> </select> <br /> <select class="selectize_search_1" name="cars[]" required> <option value="">Select Car</option> <option value="C1">Car 1</option> <option value="C2">Car 2</option> <option value="C3">Car 3</option> </select> <hr /> <button type="button" onclick="fetch_cars();">Fetch Cars</button>Entonces, supongamos que selecciono el auto 1 y el auto 2 de los menús desplegables, pero usando el código anterior, solo me devuelve el valor seleccionado en el primer menú desplegable, pero no ambos valores seleccionados.
Esto debería hacerlo:
$(function(){ var selectize_search_1 = $('.selectize_search_1').selectize({sortField: 'text'}); }); function fetch_cars(){ var cars_value = $('select.selectize_search_1').get().map(el=>el.value).join(","); console.log(cars_value); } <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script> <select class="selectize_search_1" name="cars[]" required> <option value="">Select Car</option> <option value="C1">Car 1</option> <option value="C2">Car 2</option> <option value="C3">Car 3</option> </select> <br /> <select class="selectize_search_1" name="cars[]" required> <option value="">Select Car</option> <option value="C1">Car 1</option> <option value="C2">Car 2</option> <option value="C3">Car 3</option> </select> <hr /> <button type="button" onclick="fetch_cars();">Fetch Cars</button> Si desea los valores de todos los cuadros de selección, deberá .map() sobre ellos.
jQueryObject.get() extraerá la selección de elementos del objeto jQuery, por lo que el siguiente .map() es un Array.prototype.map() nuevamente.
Mi solución. Crea una clase <select> única.
Agregué una versión de trabajo. Tiene dos clases <select> únicas ahora, con el jQuery correspondiente.
$(window).bind("load", function() { var selectize_search_1 = $('.selectize_search_1').selectize({ sortField: 'text' }); //create new selectize... //create new selectize... var selectize_search_2 = $('.selectize_search_2').selectize({ sortField: 'text' }); }); function fetch_cars() { var cars_value = $('.selectize_search_1')[0].selectize.items; //make another var... //make another var... var cars_value2 = $('.selectize_search_2')[0].selectize.items; //retrieve new selectize... //retrieve new selectize... alert("select1: "+cars_value + " select2: " + cars_value2); } <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script> <select class="selectize_search_1" name="cars[]" required> <option value="">Select Car</option> <option value="C1">Car 1</option> <option value="C2">Car 2</option> <option value="C3">Car 3</option> </select> <br /> <!-- add new class --> <!-- add new class --> <select class="selectize_search_2" name="cars[]" required> <!-- add new class --> <!-- add new class --> <option value="">Select Car</option> <option value="C1">Car 1</option> <option value="C2">Car 2</option> <option value="C3">Car 3</option> </select> <hr /> <button type="button" onclick="fetch_cars();">Fetch Cars</button>