CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Ali
Ali

Reputation: 267267

How to get all options of a select using jQuery?

How can I get all the options of a select through jQuery by passing on its ID?

I am only looking to get their values, not the text.

Upvotes: 477

Views: 897511

Answers (21)

Zeru Giran
Zeru Giran

Reputation: 61

$("select#MY_SELECT_ID").find('option').each(function() {
    console.log($(this).val());
    console.log($(this).text());
});

Upvotes: 1

KooiInc
KooiInc

Reputation: 122986

Without jQuery I do know that the HTMLSelectElement element contains an options property, which is a HTMLOptionsCollection.

const myOpts = document.getElementById('yourselect').options;
console.log(myOpts[0].value) //=> Value of the first option

A 12 year old answer. Let's modernize it a bit (using .querySelectorAll, spreading the resulting HTMLOptionsCollection to Array and map the values).

// helper to retrieve an array of elements using a css selector
const nodes = selector => [...document.querySelectorAll(selector)];

const results = {
  pojs: nodes(`#demo option`).map(o => o.value),
  jq: $(`#demo option`).toArray().map( o => o.value ),
}
console.log( `pojs: [${results.pojs.slice(0, 5)}]` );
console.log( `jq: [${results.jq.slice(0, 5)}]` );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="demo">
  <option value="Belgium">Belgium</option>
  <option value="Botswana">Botswana</option>
  <option value="Burkina Faso">Burkina Faso</option>
  <option value="Burundi">Burundi</option>
  <option value="China">China</option>
  <option value="France">France</option>
  <option value="Germany">Germany</option>
  <option value="India">India</option>
  <option value="Japan">Japan</option>
  <option value="Malaysia">Malaysia</option>
  <option value="Mali">Mali</option>
  <option value="Namibia">Namibia</option>
  <option value="Netherlands">Netherlands</option>
  <option value="North Korea">North Korea</option>
  <option value="South Korea">South Korea</option>
  <option value="Spain">Spain</option>
  <option value="Sweden">Sweden</option>
  <option value="Uzbekistan">Uzbekistan</option>
  <option value="Zimbabwe">Zimbabwe</option>
</select>

Upvotes: 197

Alexandre Crivellaro
Alexandre Crivellaro

Reputation: 893

This is a very simple way to generate a list of comma separated values.

var values = "";

$('#sel-box option').each(function () { 
   values = values + $(this).val() + ";";
});

Upvotes: 1

Cyclonecode
Cyclonecode

Reputation: 30121

Another way would be to use toArray() in order to use fat arrow function with map e.g:

const options = $('#myselect option').toArray().map(it => $(it).val())

Upvotes: 4

Thomas Petersen
Thomas Petersen

Reputation: 1012

This will put the option values of #myselectbox into a nice clean array for you:

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

// Next, translate that into an array of just the values
var values = $.map(options, e => $(e).val())

Upvotes: 28

Murosadatul
Murosadatul

Reputation: 125

    var arr = [], option='';
$('select#idunit').find('option').each(function(index) {
arr.push ([$(this).val(),$(this).text()]);
//option = '<option '+ ((result[0].idunit==arr[index][0])?'selected':'') +'  value="'+arr[index][0]+'">'+arr[index][1]+'</option>';
            });
console.log(arr);
//$('select#idunit').empty();
//$('select#idunit').html(option);

Upvotes: 2

GLK
GLK

Reputation: 1045

I found it short and simple, and can be tested in Dev Tool console itself.

$('#id option').each( (index,element)=>console.log( index : ${index}, value : ${element.value}, text : ${element.text}) )

Upvotes: 0

Emin Adiloğlu
Emin Adiloğlu

Reputation: 97

The short way

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

or

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;}

Upvotes: 0

noone
noone

Reputation: 6568

Here is a simple example in jquery to get all the values, texts, or value of the selected item, or text of the selected item

$('#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' />

Upvotes: 2

Cubiczx
Cubiczx

Reputation: 1145

This is a simple Script with 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>

Upvotes: 1

ybo
ybo

Reputation: 17162

Use:

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

.each() | jQuery API Documentation

Upvotes: 696

Sergei Zinovyev
Sergei Zinovyev

Reputation: 1286

For multiselect option:

$('#test').val() returns list of selected values. $('#test option').length returns total number of options (both selected and not selected)

Upvotes: 4

Limpan
Limpan

Reputation: 682

You can take all your "selected values" by the name of the checkboxes and present them in a sting separated by ",".

A nice way to do this is to use jQuery's $.map():

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

alert(selected_val);

Upvotes: 12

Mitul Maheshwari
Mitul Maheshwari

Reputation: 2647

You can use following code for that:

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

Upvotes: 4

andreas
andreas

Reputation: 7415

Some answers uses each, but map is a better alternative here IMHO:

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

There are (at least) two map functions in jQuery. Thomas Petersen's answer uses "Utilities/jQuery.map"; this answer uses "Traversing/map" (and therefore a little cleaner code).

It depends on what you are going to do with the values. If you, let's say, want to return the values from a function, map is probably the better alternative. But if you are going to use the values directly you probably want each.

Upvotes: 82

Raibaz
Raibaz

Reputation: 9710

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

Upvotes: 65

Tjcool
Tjcool

Reputation: 391

If you're looking for all options with some selected text then the below code will work.

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

Upvotes: 0

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7678

Working example

The most efficient way to do this is to use $.map()

Example:

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

Upvotes: 7

PCasagrande
PCasagrande

Reputation: 5412

$.map is probably the most efficient way to do this.

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

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

You can add change options to $('#selectBox option:selected') if you only want the ones that are selected.

The first line selects all of the checkboxes and puts their jQuery element into a variable. We then use the .map function of jQuery to apply a function to each of the elements of that variable; all we are doing is returning the value of each element as that is all we care about. Because we are returning them inside of the map function it actually builds an array of the values just as requested.

Upvotes: 169

Pavel Krinitskiy
Pavel Krinitskiy

Reputation: 17

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

Or:

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

To see the results:

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

Upvotes: 0

Ben Sewards
Ben Sewards

Reputation: 2661

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

Although, the CORRECT way is to set the DOM property of the element, like so:

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

Upvotes: 16

Related Questions