Existe-t-il un moyen de sélectionner uniquement les 2 premières options de sélection de valeur au lieu des 4, comme dans l'exemple ci-dessous ? j'ai besoin de

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

En cliquant sur le bouton.

 $("#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>
0
TheFallenOne 8 mars 2019 à 23:45

2 réponses

Meilleure réponse

Vous pouvez utiliser le sélecteur jQuery :lt() pour ne récupérer que les deux premiers éléments, et chaînez un .toArray() pour le transformer en un tableau 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>

Ou, comme une chaîne...

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>
1
Tyler Roper 8 mars 2019 à 21:07

Vous pouvez utiliser la propriété options pour cela

 $("#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>
1
j08691 8 mars 2019 à 20:55