To get the first 2 html values of a select list

Question

Is there a way I can select only the top 2 select value options instead of all 4 like how it is happening in the below example? I need

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>

on button click.

 $("#btnTest").click(function(){
     var options = $("#test").html();
     console.log(options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="test">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<button id="btnTest" type="button">Click Me!</button>

maybe this will help you [link.](https://stackoverflow.com/questions/2950152/iterate-through-select-options) — ilia, Mar 08 '19 at 20:54

score 1 · Answer 1 · edited Mar 08 '19 at 20:55

You can use options property for this

 $("#btnTest").click(function(){
     var options = Array.from($("#test")[0].options).slice(0, 2);
   console.log(options)
});

$("#btnTest").click(function() {
  var options = Array.from($("#test")[0].options).slice(0, 2);
  console.log(options)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="test">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<button id="btnTest" type="button">Click Me!</button>

Tyler Roper · Accepted Answer · 2019-03-08T21:07:33.163

You can use the jQuery :lt() selector to grab only the first two elements, and chain a .toArray() to turn it into an array of HTML.

var $options = $("#test option:lt(2)").toArray();

 $("#btnTest").click(function(){
   var options = $("#test option:lt(2)").toArray();
   console.log(options);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="test">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<button id="btnTest" type="button">Click Me!</button>

Or, as a string...

var options = $("#test option:lt(2)")
  .toArray()
  .map(function(e){return e.outerHTML})
  .join("\n");

$("#btnTest").click(function(){
  var options = $("#test option:lt(2)")
    .toArray()
    .map(function(e){return e.outerHTML}) //get outerHTML of each element
    .join("\n");                          //join them with a line-break
  console.log(options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="test">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<button id="btnTest" type="button">Click Me!</button>

To get the first 2 html values of a select list

2 Answers2