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 à obtenir leurs valeurs, pas le texte.

Utilisation:

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

.each () | Documentation de l'API jQuery

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

$.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 qui sont 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 .mapfonction de jQuery pour appliquer une fonction à chacun des éléments de cette variable; tout ce que nous faisons, c'est renvoyer la valeur de chaque élément car c'est tout ce qui nous importe. Parce que nous les renvoyons à l'intérieur de la fonction map, il construit en fait un tableau des valeurs exactement comme demandé.

Certaines réponses utilisent each, mais mapc'est une meilleure alternative ici à mon humble avis:

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

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

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

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

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

Bien que la méthode CORRECT soit de définir la propriété DOM de l'élément, comme ceci:

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

Cela mettra les valeurs d'option de #myselectboxdans un joli tableau 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();});

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

Une bonne façon de le 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);

Exemple de travail

La façon la plus efficace de procéder consiste à utiliser $.map()

Exemple:

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

Vous pouvez utiliser le code suivant pour cela:

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

Pour l'option multisélection:

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

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>

Voici un exemple simple dans jquery pour obtenir toutes les valeurs, textes ou valeur de l'élément sélectionné, ou 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' />

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

Ou:

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

Pour voir les résultats:

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

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

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

Le chemin court

$(() => {
$('#myselect option').each((index, data) => {
    console.log(data.attributes.value.value)
})})

ou

export function GetSelectValues(id) {
const mData = document.getElementById(id);
let arry = [];
for (let index = 0; index < mData.children.length; index++) {
    arry.push(mData.children[index].value);
}
return arry;}