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

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>

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.

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

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())

For multiselect option:

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

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' />

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

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())

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() + ";";
});

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

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

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