Как получить определенный dropDown options

285
23 января 2017, 20:52

Есть selected c options. Опций может быть много, в зависимости от цели.
Как мне получить определенную опцию (допустим, 10-ую по счету)?
Могу получать только первый и последний, а как выбрать по индексу?

Answer 1

Получить элемент по порядковому номеру можно через $(selector).eq(index), либо $('selector:eq(index)'), где index - номер элемента, начиная от 0. Предпочтительнее первый способ, т.к. легче читать и не нужно манипуляций с конкатенацией строк и чисел(селектора и индекса)

$('input').on('input', function(){ 
  var val = $(this).val()*1; 
  var option = $('select').find('option').eq(val); 
  if(option.val() != undefined){ 
    $('#out').html(option.val() + '<br/><b>Код команды:</b> $("select").find("option").eq('+val + ')'); 
    $('#out_html').html(option.html()); 
    $('select').val(option.val()); 
  } 
}); 
//$('select')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<b>Option number:</b> <input/><br/> 
<select style='margin-top:10px;'> 
  <option value='opt_1'>FIRST</option> 
  <option value='opt_2'>SECOND</option> 
  <option value='opt_3'>THIRD</option> 
  <option value='opt_4'>FOURTH</option> 
  <option value='opt_5'>FIFTH</option> 
 </select><br/> 
<b>Option value:</b> <span id='out'></span><br/> 
<b>Option html:</b> <span id='out_html'></span>

Answer 2

На javascript

document.querySelectorAll('.myselect option')[10]
Answer 3

Если список опций имеет вот такой вид:

<select name="" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

То проблему задачу решить вот так:

чистый JS:

    document.getElementById('select').options[9].value // получение значения 10-го элемента
    document.getElementById('select').options[9].text // получение текста 10-го элемента

jQuery:

    $('#select option:nth-child(10)').val() // получение значения 10-го элемента
    $('#select option:eq(9)').val() // получение значения 10-го элемента
    $('#select option').eq(9).val() // получение значения 10-го элемента
    // текст получаем аналогично через метод .text()
READ ALSO
Изменение языка в input type date

Изменение языка в input type date

Здравствуйте! Есть input[type="date"], проблема в том, что при отсутствии изначально установленного value, поле отображается на русском языке:

1039