Как получить значение тега select с определенным классом и атрибутом данных?

<div id='participant-detail'>
      <select class="form-control quantity" data-short-name="8"> 
      </select>

      <select class="form-control quantity" data-short-name="6"> 
      </select>
</div>

В этом примере, как я должен получить значение первого тега select с коротким именем данных «8»?

Я старался

$('#participant-detail .quantity').find("select[data-short-name='8']").val()

'#participant-detail' - это идентификатор контейнера (div) этих двух тегов Выбрать.

Как найти или перейти к конкретному тегу и получить его значение?

Давать ему идентификатор не рекомендуется, потому что эти теги Выбрать были созданы из-за некоторых условий.

Упростить, объединив первый селектор со вторым? Перебрать выбранные элементы?

evolutionxbox 22.05.2019 11:35
find() смотрит на дочерние элементы элемента, поэтому здесь он вам не нужен. Просто добавьте селектор атрибутов в конец класса: $('#participant-detail .quantity[data-short-name='8']").val()
Rory McCrossan 22.05.2019 11:36
$('#participant-detail .quantity') это уже select
Eddie 22.05.2019 11:36

как насчет :nth-child() ??

jay patel 22.05.2019 11:36
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
2
4
1 453
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

$('#participant-detail .quantity').find("select[data-short-name='8']") не возвращает ни одного элемента, так как нет дочернего элемента селектора #participant-detail .quantity с соответствующими критериями select[data-short-name='8'].

Вы можете попробовать следующий подход, чтобы получить желаемый результат.

console.log($('#participant-detail').find("select[data-short-name='8']").val());
console.log($('#participant-detail select.quantity[data-short-name="8"]').val());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='participant-detail'>
      <select class="form-control quantity" data-short-name="8"> 
      <option value="a">A</option>
      </select>

      <select class="form-control quantity" data-short-name="6"> 
        <option value="b">B</option>
      </select>
</div>

Это возвращает только первый элемент?

evolutionxbox 22.05.2019 11:36

Это то, о чем просит ОП.

Rory McCrossan 22.05.2019 11:37

@RoryMcCrossan мой плохой. Это я плохо читаю.

evolutionxbox 22.05.2019 11:39

используйте document.getElementById, чтобы выбрать div, затем querySelector, чтобы выбрать первого ребенка

let elem = document.getElementById('participant-detail').querySelector('select[data-short-name="8"]');
console.log(elem)
<div id='participant-detail'>
  <select class="form-control quantity" data-short-name="8">
  </select>

  <select class="form-control quantity" data-short-name="6">
  </select>
</div>

Вы не используете jQuery, о котором просил ОП.

evolutionxbox 22.05.2019 11:38
Ответ принят как подходящий

find() пытается найти элемент select внутри $('#participant-detail .quantity'), который сам является элементом. Таким образом, find() не нацеливается на элемент.

Вам не нужно использовать find(), вы можете указать селектор атрибутов как часть основного селектора:

var val = $('#participant-detail select.quantity[data-short-name=8]').val();
console.log(val);
var val2 = $('#participant-detail select.quantity[data-short-name=6]').val();
console.log(val2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='participant-detail'>
    <select class="form-control quantity" data-short-name="8"> 
      <option value="1111">1111</option>
      <option value="2222" selected>2222</option>
    </select>

    <select class="form-control quantity" data-short-name="6">
      <option value="1111" selected>1111</option>
      <option value="2222">2222</option>
    </select>
</div>

Другие вопросы по теме