How to Get All Options of a Select Using Jquery

How to get all options of a select using jQuery?

Use:

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

.each() | jQuery API Documentation

How to get all option values in select by Jquery?

var values = $("#group_select>option").map(function() { return $(this).val(); });

Get all selected options elements from all select elements in a form

You can use map method:

var arr = $('select.skillLevel').map(function(){
return this.value
}).get()

arr is an array of values.

how to get all select option values using jquery

Try this

Loop through #mainMenu option using .each() then get appropraite values using $(this).val() then push using arr.push($(this).val());

var arr = new Array();
$('#mainMenu option').each(function(){
arr.push($(this).val());
});
console.log(arr)

Working DEMO

Getting all options in a select element

That code does exactly what it says on the box. Normally I would expect you would have used $("#wordList option") to get the options. I am guessing that if the options are "This", "That" and "The other" then you got ThisThatThe Other,, which is what that code will do (that is all the text inside the #wordList element, which essentially includes all the options inside that element. The array you are performing .each() on has a single element: "ThisThatThe Other", you iterate over it once and add a comma).

You want to concatenate the text of each of the OPTIONS in #wordList (I think), so try

var str = "";    
$("#wordList option").each(function () {
str += $(this).text() + ",";
});
alert(str);

to give you a string of all the words (like This,That,The Other,)
If you want an array, instead do this:

var arr = [];    
$("#wordList option").each(function () {
arr.push($(this).text());
});
alert(arr.join(", "));

How do I get all select elements that do not have an option selected using jQuery?

Refer to https://stackoverflow.com/a/63588880/3499595 if your case is not similar to OP (default value is "")

$('select option:selected[value=""]').parent()
  • Selects all the :selected options of all the select elements
  • Checks if the selected option has a value of "", which in your case means no option is actually selected.
  • Returns the parent (which would be a select)

How to get all the options from a select element in a list

You can get the select node and find all the options in the select node and get the html from those options.

var selectNode = $('select-selector');
var options = selectNode.find('option').toArray().map(function (o) { return o.outerHTML});

Edit as per suggestion from comment by Rory.

$.map(selectNode.find('option'), function(o) { return o.outerHTML; });

Iterate through select options

$("#selectId > option").each(function() {
alert(this.text + ' ' + this.value);
});
  • http://api.jquery.com/each/
  • http://jsfiddle.net/Rx3AP/

How to get all “option” values in “select” by the name using Jquery?

This should do it:

    var arr = [];

$("select[name='groupa'] > option").each(function() {
//doSomething
//e.g push to arr
arr.push(this.value);
});
console.log(arr);

To get all values into an array you can do:

    var arr = $("select[name='groupa'] > option").map(function(){
return $(this).val();
}).get();
console.log(arr);

How to set all options to selected from multiple select boxes

The simplest way to select every single item on click, would be as follows:

$("select[multiple] option").prop("selected", "selected");

Example fiddle: http://jsfiddle.net/vYzUS/

In the fiddle, I've omitted the button click and turned the HTML into dummy HTML. I've also (arbitrarily) added the multiple attribute, incase you have any other select lists that you do not want to be selected. It might be more advisable to wrap the ones you do want to select in a div with an id, as it will give the selector a better focus.

I've also used .prop() instead of .attr() - .prop() was introduced in jQuery 1.7 and is specifically for retrieval/setting of property values.



Related Topics



Leave a reply



Submit