如何获取具有特定类和数据属性的选择标签的值？ [复制]

Posted 2023-03-05

【中文标题】如何获取具有特定类和数据属性的选择标签的值？ [复制]

【英文标题】：How to get the value of select tag with certain class and data attribute? [duplicate]

【发布时间】：2019-10-08 18:08:35

【问题描述】：

<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”的第一个选择标记的值？

我试过了

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

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

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

不建议给它一个 id，因为那些 select 标签是根据某些条件创建的。

【问题讨论】：

通过组合第一个选择器和第二个选择器来简化？循环选择的元素？

find() 查看一个元素的子元素，所以这里不需要它。只需将属性选择器添加到类的末尾：$('#participant-detail .quantity[data-short-name='8']").val()

$('#participant-detail .quantity') 这已经是select

:nth-child() 呢？？

【参考方案1】：

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>

【参考方案2】：

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

【讨论】：

这只返回第一个元素？

这就是 OP 所要求的。

@RoryMcCrossan 我的错。那是我读得不好。

【参考方案3】：

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

【讨论】：

您没有使用 OP 要求的 jQuery。