Как установить значение для опций выбора на основе его номера индекса?

Question

Как установить значение для опций выбора на основе его индексного номера или, другими словами, как выбрать опцию выбора на основе его индексного номера

   <select name="size" id="size">
      <option value="a" hidden selected>Select Size</option>
      <option value="1">Normal</option>
      <option value="2">Large</option>
    </select>

Answer 1

Элемент select (HTMLSelectElement) имеет свойство массива под названием options, в которое можно индексировать:

const select = document.getElementById("size");
console.log(select.options[0].value);
console.log(select.options[0].text);

<select name="size" id="size">
  <option value="a" hidden selected>Select Size</option>
  <option value="1">Normal</option>
  <option value="2">Large</option>
</select>

Или с jQuery:

const $select = $("#size");
const select = $select[0];
console.log(select.options[0].value);
console.log(select.options[0].text);

<select name="size" id="size">
  <option value="a" hidden selected>Select Size</option>
  <option value="1">Normal</option>
  <option value="2">Large</option>
</select>

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

Answer 2

Как установить значение для выбранных опций на основе его индексного номера

$('#size option').each(function() {
  $(this).attr('value', $(this).index())

  //! test
  console.log($(this).index())
  // test!
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select name="size" id="size">
  <option value="a" hidden selected>Select Size</option>
  <option value="1">Normal</option>
  <option value="2">Large</option>
</select>

или, другими словами, как выбрать параметры выбора на основе его индексного номера

$('#size option').eq(2).prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select name="size" id="size">
  <option value="a" hidden selected>Select Size</option>
  <option value="1">Normal</option>
  <option value="2">Large</option>
</select>

Answer 3

Я думаю, это то, что вы хотите.

$('#size option').each(function() {
  let index = $('#size option').index(this);
  console.log($('#size option')[index].value, ':', $('#size option')[index].text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select name="size" id="size">
  <option value="a" hidden selected>Select Size</option>
  <option value="1">Normal</option>
  <option value="2">Large</option>
</select>

Answer 4

Чтобы установить выбранную опцию, вы можете использовать:

$('#size :nth-child(index)').prop('selected', true);