使用jQuery按数据属性操作选项
使用jQuery按数据属性操作选项
提问于 2016-07-13 13:44:53
我有一个带有选项的下拉菜单，我想根据其数据-*属性使用jQuery修改这些选项(在本例中，隐藏所有选项，然后只显示具有X属性的选项)
下坠：
<button onclick="changeopts(10)">click me</button>
<select id="testsel">
<option data-test="10" value="0">opt1</option>
<option data-test="11" value="5">opt2</option>
<option data-test="12" value="200">opt3</option>
</select>Javascript：
function changeopts(show){
var opts = document.getElementById("testsel").options;
$(opts).prop('disabled',true);
$(opts).css('display','none');
if ($(opts).attr('data-test')==show){
$(opts).prop('disabled',false);
$(opts).css('display','inline');
}
}这不管用。我假设if语句不能同时查看所有选项。如果可能的话，我想避免循环所有选项。
我使用的解决方案：
function changeopts(show){
var opts = document.getElementById("testsel").options;
$(opts).prop('disabled',true);
$(opts).css('display','none');
$('#testsel option[data-test="'+show+'"]').prop('disabled',false);
$('#testsel option[data-test="'+show+'"]').css('display','inline');
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-13 13:56:11
您可以将该“显示”值作为选择器传递：
function changeopts(show) {
$('#testsel option').hide();
$('#testsel option[data-test="'+show+'"]').show();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeopts(12)">click me</button>
<select id="testsel">
<option data-test="10" value="0">opt1</option>
<option data-test="11" value="5">opt2</option>
<option data-test="12" value="200">opt3</option>
</select>
奖金
在我看到的实际代码中，即使筛选了默认的第一个选项(默认的第一个选项仍被选中)，也可以添加另一行代码，将匹配元素的第一个设置为默认值：
function changeopts(show) {
$('#testsel option').hide();
$('#testsel option[data-test="'+show+'"]').show();
$('#testsel option[data-test="'+show+'"]').first().attr('selected',true)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeopts(12)">click me</button>
<select id="testsel">
<option data-test="10" value="0">opt1</option>
<option data-test="11" value="5">opt2</option>
<option data-test="12" value="200">opt3</option>
<option data-test="12" value="210">opt3.1</option>
</select>
Stack Overflow用户
发布于 2016-07-13 13:48:42
这是因为您没有筛选元素，这些元素的数据属性值等于变量show。因此，它使所有选项元素都启用并可见。
您需要使用.filter()函数在选项集中筛选元素，然后启用它并显示：
$(opts).filter(function(){
return $(this).data("test") == show;
}).prop('disabled', false).show();工作片段：
function changeopts(show){
var opts = document.getElementById("testsel").options;
$(opts).prop('disabled',true);
$(opts).css('display','none');
$(opts).filter(function(){
return $(this).data("test") == show;
}).prop('disabled', false).show();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button onclick="changeopts(10)">click me</button>
<select id="testsel">
<option data-test="10" value="0">opt1</option>
<option data-test="11" value="5">opt2</option>
<option data-test="12" value="200">opt3</option>
</select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38353508
复制相关文章
相似问题
腾讯云开发者
