web-dev-qa-db-fra.com

Comment obtenir toutes les options d'une sélection en utilisant jQuery?

Comment puis-je obtenir toutes les options d'une sélection via jQuery en transmettant son ID?

Je cherche seulement à connaître leurs valeurs, pas le texte.

javascriptjqueryjquery-selectors
370
Click Upvote

Utilisation:

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each () | Documentation de l'API jQuery

567
ybo

Je ne connais pas jQuery, mais je sais que si vous obtenez l'élément select, il contient un objet 'options'.

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option
152
KooiInc

$.map est probablement le moyen le plus efficace de le faire.

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

Vous pouvez ajouter des options de modification à $('#selectBox option:selected') si vous souhaitez uniquement celles sélectionnées.

La première ligne sélectionne toutes les cases à cocher et place leur élément jQuery dans une variable. Nous utilisons ensuite la fonction .map de jQuery pour appliquer une fonction à chacun des éléments de cette variable; tout ce que nous faisons est de renvoyer la valeur de chaque élément car c'est tout ce qui nous importe. Comme nous les renvoyons à l'intérieur de la fonction map, cela crée en réalité un tableau des valeurs, comme demandé.

128
PCasagrande

Certaines réponses utilisent each, mais map est une meilleure alternative ici IMHO:

$("select#example option").map(function() {return $(this).val();}).get();

Il y a (au moins) deux map fonctions dans jQuery. La réponse de Thomas Petersen utilise "Utilities/jQuery.map"; cette réponse utilise "Traversing/map" (et donc un code un peu plus propre).

Cela dépend de ce que vous allez faire avec les valeurs. Si vous voulez, par exemple, renvoyer les valeurs d'une fonction, map est probablement la meilleure alternative. Mais si vous utilisez les valeurs directement, vous voulez probablement each.

66
cic
$('select#id').find('option').each(function() {
    alert($(this).val());
});
46
Raibaz
$("#id option").each(function()
{
    $(this).prop('selected', true);
});

Bien que, le cheminCORRECTconsiste à définir la propriété DOM de l'élément, comme suit:

$("#id option").each(function(){
    $(this).attr('selected', true);
});
16
Ben Sewards

Cela mettra les valeurs d’option#myselectboxdans un tableau propre à Nice pour vous:

// First, get the elements into a list
var domelts = $('#myselectbox option');

// Next, translate that into an array of just the values
var values = $.map(domelts, function(elt, i) { return $(elt).val();});
12
Thomas Petersen

Vous pouvez prendre toutes vos "valeurs sélectionnées" par le nom des cases à cocher et les présenter dans une liste séparée par ",".

Une bonne façon de faire est d’utiliser $ .map () de jQuery:

var selected_val = $.map($("input[name='d_name']:checked"), function(a)
    {
        return a.value;
    }).join(',');

alert(selected_val);
11
Limpan

Exemple de travail

Le moyen le plus efficace consiste à utiliser $.map()

Exemple:

var values = $.map($('#selectBox option'), function(ele) {
   return ele.value; 
});
6
Naveen Kumar Alonekar

Vous pouvez utiliser le code suivant pour cela:

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
    assignedRoleId.Push(this.value);
});
3
Mitul Maheshwari

Pour l'option multisélectionner:

$('#test').val() renvoie la liste des valeurs sélectionnées .$('#test option').length renvoie le nombre total d'options (sélectionnées et non sélectionnées).

2
Sergei Zinovyev

Ceci est un script simple avec jQuery:

var items = $("#IDSELECT > option").map(function() {
    var opt = {};
    opt[$(this).val()] = $(this).text();
    return opt;
}).get();
var selectvalues = [];

for(var i = 0; i < items.length; i++) {
    for(key in items[i]) {


        var id = key;
        var text = items[i][key];

        item = {}
        item ["id"] = id;
        item ["text"] = text;

        selectvalues.Push(item);

    }
}
console.log(selectvalues);
copy(selectvalues);

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
1
Cubiczx
$("input[type=checkbox][checked]").serializeArray();

Ou:

$(".some_class[type=checkbox][checked]").serializeArray();

Pour voir les résultats:

alert($("input[type=checkbox][checked]").serializeArray().toSource());
0
Pavel Krinitskiy

Si vous recherchez toutes les options avec du texte sélectionné, le code ci-dessous fonctionnera.

$('#test').find("select option:contains('B')").filter(":selected");
0
Tjcool

Voici un exemple simple dans jQuery pour obtenir toutes les valeurs, les textes ou la valeur de l'élément sélectionné, ou le texte de l'élément sélectionné.

$('#nCS1 > option').each((index, obj) => {
   console.log($(obj).val());
})


printOptionValues = () => {

  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).val());
  })

}

printOptionTexts = () => {
  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).text());
  })
}

printSelectedItemText = () => {
  console.log($('#nCS1 option:selected').text());
}

printSelectedItemValue = () => {
  console.log($('#nCS1 option:selected').val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" id="nCS1" name="nCS1" class="form-control" >
					<option value="22">Australia</option>
          <option value="23">Brunei</option>
          <option value="33">Cambodia</option>
          <option value="32">Canada</option>
          <option value="27">Dubai</option>
          <option value="28">Indonesia</option>
          <option value="25">Malaysia</option>				
</select>
<br/>
<input type='button' onclick='printOptionValues()' value='print option values' />
<br/>
<input type='button' onclick='printOptionTexts()' value='print option texts' />
<br/>
<input type='button' onclick='printSelectedItemText()' value='print selected option text'/>
<br/>
<input type='button' onclick='printSelectedItemValue()' value='print selected option value' />

0
NuOne T Attygalle