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

Question

Comment puis-je obtenir toutes les options d'une sélection par jQuery en passant sur son ID?

Je ne cherche à obtenir leurs valeurs, pas le texte.

Answer 1

Utilisation:

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

.each () | jQuery API Documentation

Answer 2

Je ne sais 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

Answer 3

$.map est probablement la façon la 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 ne souhaitez que ceux qui sont sélectionnés.

La première ligne sélectionne toutes les cases et met 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 retour la valeur de chaque élément comme qui est tout ce que nous préoccupons. Parce que nous les retourner à l'intérieur de la fonction de carte, il construit en réalité un tableau des valeurs comme demandé.

Answer 4

Quelques réponses utilise each, mais map est une meilleure alternative ici à mon humble avis:

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

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

Cela dépend de ce que vous allez faire avec les valeurs. Si vous, disons, veulent revenir les valeurs d'une fonction, map est probablement la meilleure alternative. Mais si vous allez utiliser directement les valeurs que vous voulez probablement each.

Answer 5

$('select#id').find('option').each(function() {
    alert($(this).val());
});

Answer 6

$("#id option").each(function()
{
    $(this).prop('selected', true);
});

Bien que, comme CORRECT est de définir la propriété DOM de l'élément, comme suit:

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

Answer 7

Cela mettra les valeurs des options de #myselectbox dans une belle gamme propre 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();});

Answer 8

Vous pouvez prendre toutes vos « valeurs sélectionnées » par le nom des cases à cocher et de les présenter dans un aiguillon séparés par des « ».

Une belle façon de le faire est d'utiliser jQuery de .map $ ():

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

alert(selected_val);

Answer 9

Exemple de travail

La façon la plus efficace de le faire est d'utiliser $.map()

Exemple:

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

Answer 10

Vous pouvez utiliser le code suivant pour cela:

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

Answer 11

Pour l'option multiselect:

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

Answer 12

Ceci est un simple script 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>

Answer 13

Voici un exemple simple 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' />

Answer 14

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

Ou:

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

Pour voir les résultats:

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

Answer 15

Si vous êtes à la recherche de toutes les options avec un texte sélectionné, le code ci-dessous fonctionnera.

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