Estoy tratando de obtener el nombre de todos los elementos seleccionados de las opciones de selección multiple="multiple" dropdown.

En mi página html, tengo el siguiente fragmento de código:

<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
     <option selected="selected" value="1">Washroom</option>
     <option  value="2">Restaurant</option>
</select>

En mi archivo JS, tengo el siguiente fragmento de código:

var categoryNameArray = $('#ddlCategory').val();
console.log("category = " + categoryNameArray[0];

Sin embargo, la variable categoryNameArray solo me da la matriz de los elementos seleccionados, lo que quiero es el nombre de los elementos seleccionados. ¿Alguien puede decirme de alguna manera cómo puedo hacer que esto funcione? ¡Gracias!

1
Hardyanto Putra Antoni 10 ene. 2017 a las 11:18

4 respuestas

La mejor respuesta

Dado que val no le está dando lo que desea, voy a suponer que desea una matriz del texto de los elementos seleccionados.

Puedes conseguirlo así:

var selectedTextArray = $("#ddlCategory option:selected").map(function() {
    return $(this).text();
}).get();

Eso encuentra todos los elementos seleccionados, luego usa map para obtener el texto de cada uno de ellos (envuelto en un objeto jQuery), luego usa get para convertir ese objeto jQuery en una matriz.

Probablemente pueda usar return this.text; en lugar de return $(this).text();, ya que HTMLOptionElement tiene una propiedad text (que la mayoría de los elementos no tienen), pero me aseguraría de probar con mis navegadores de destino para estar seguro.

Ejemplo:

$("#btn").on("click", function() {
  var selectedTextArray = $("#ddlCategory option:selected").map(function() {
    return $(this).text();
  }).get();
  console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
  <option value="1">Washroom</option>
  <option value="2">Restaurant</option>
  <option value="3">Service Station</option>
  <option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ejemplo con this.text en lugar de $(this).text():

$("#btn").on("click", function() {
  var selectedTextArray = $("#ddlCategory option:selected").map(function() {
    return this.text;
  }).get();
  console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
  <option value="1">Washroom</option>
  <option value="2">Restaurant</option>
  <option value="3">Service Station</option>
  <option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
5
T.J. Crowder 10 ene. 2017 a las 08:26

Prueba esto:

var categoryNameArray = 
$('#ddlCategory option:selected').map(function(){
    return this.text;
}).get();
console.log("category = " + categoryNameArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
            <option selected="selected" value="1">Washroom</option>
            <option selected="selected" value="2">Restaurant</option>
            <option  value="3">Coffee Shop</option>
            <option  value="4">Hotels</option>
    </select>
0
Suchit kumar 10 ene. 2017 a las 08:25

La forma fácil de obtener todo el valor seleccionado es $ ('# ddlCategory'). Val ();

0
Sanjay 10 ene. 2017 a las 08:28

val() devuelve los valores de las opciones seleccionadas, en su caso 1, 2 .... Debe usar text() para obtener los nombres de las opciones seleccionadas. Puede recorrer todas las opciones seleccionadas con el método each() y obtener los valores seleccionados con text():

$('a').on('click', function(e) {
  e.preventDefault();
  $('#ddlCategory option:selected').each(function(i, selected) {
    console.log($(selected).text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
  <option selected="selected" value="1">Washroom</option>
  <option value="2">Restaurant</option>
</select>
<a href="#">Send</a>

Puede leer más sobre cómo funciona val() aquí .

Puede leer más sobre cómo funciona text() aquí .

2
Ionut Necula 10 ene. 2017 a las 08:35