Question

<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>

在这些给定的示例中，我应该如何获取数据短名称为'8'的第一个select标签的值？

我尝试了

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

“＃participant-detail”是这两个 select 标签的容器（div）的ID。

如何查找或导航到特定标签并获取其值？

不建议为其提供ID，因为这些 select 标签是根据某些条件创建的。

Answer 1

$('#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>

Answer 2

使用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>

Answer 3

find()试图在$('#participant-detail .quantity')中找到本身就是元素的select元素。因此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>

如何获得具有特定类和数据属性的select标签的值？

3 个答案: