如何使用jQuery获取数据表中选定的属性值
如何使用jQuery获取数据表中选定的属性值
提问于 2020-01-23 10:45:25
$("input[name=TypeList]").focusout(function(){
alert($(this).attr('data-value'));
});<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/>
<datalist id = "TypeList">
<option data="1" data-value="1">Internet Explore1</option>
<option data-value="4">Internet Explore4</option>
<option data-value="3">Internet Explore3</option>
<option data-value="2">Internet Explore2</option>
</datalist>
</body>
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-01-23 12:27:44
不确定是否有比这更简单的解决方案。试试下面。
$("input[name=TypeList]").focusout(function(){
console.log($([].slice.call($(this)[0].list.children).filter((e) => {
return e.value === $(this).val();
})).attr('data-value'));
});<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/>
<datalist id = "TypeList">
<option data="1" data-value="1">Internet Explore1</option>
<option data-value="4">Internet Explore4</option>
<option data-value="3">Internet Explore3</option>
<option data-value="2">Internet Explore2</option>
</datalist>
</body>
Stack Overflow用户
发布于 2020-01-23 10:50:09
您可以使用jQuery :contains() pseudo-class selector根据内容进行选择。
$("input[name=TypeList]").focusout(function(){
alert($(`#TypeList option:contains('${this.value}')`).data('value'));
});<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/>
<datalist id = "TypeList">
<option data="1" data-value="1">Internet Explore1</option>
<option data-value="4">Internet Explore4</option>
<option data-value="3">Internet Explore3</option>
<option data-value="2">Internet Explore2</option>
</datalist>
</body>
为了进行完全匹配，您必须使用filter()方法。
$("input[name=TypeList]").focusout(function() {
var val = this.value;
alert($('#TypeList option').filter(function() {
return val === this.value;
}).data('value'));
});<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="s" name="TypeList" list="TypeList" placeholder="Select Type" />
<datalist id="TypeList">
<option data="1" data-value="1">Internet Explore1</option>
<option data-value="4">Internet Explore4</option>
<option data-value="3">Internet Explore3</option>
<option data-value="2">Internet Explore2</option>
</datalist>
</body>
FYI :获取data-*值的使用jQuery data()方法。
Stack Overflow用户
发布于 2020-01-23 10:48:59
$(this).val()应该为你做好这份工作。:)
$("input[name=TypeList]").focusout(function(){
alert($(this).val());
});<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/>
<datalist id = "TypeList">
<option data="1" data-value="1">Internet Explore1</option>
<option data-value="4">Internet Explore4</option>
<option data-value="3">Internet Explore3</option>
<option data-value="2">Internet Explore2</option>
</datalist>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59876704
复制相关文章
相似问题
腾讯云开发者
