如何在 JQuery 中获取 select.options 的属性

Question

我试图在循环中获取option的属性for。但是我的用例在这里不起作用。任何人都可以帮忙。

for (var y = 0; y < $('select option').length; y++){
this.options[y].attr('disabled'); // Not working (attr is not a function)
this.options[y].prop('disabled'); // Not working (prop is not a function)
}

<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" selected>Audi</option>
</select>

Answer 1

为什么不使用jQuery的.each()

$('select option').each(function(){
$(this).attr('disabled', 'disabled');
});

<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" selected>Audi</option>
</select>

Answer 2

这是工作示例：-

var selectedOptions = $('select option')

for (var y = 0; y < selectedOptions.length; y++){
console.log(selectedOptions[y].disabled) 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" selected>Audi</option>
</select>

Answer 3

检查这个

for (var y = 0; y < $('select option').length; y++){
$(this.options[y]).attr('disabled'); // Not working (attr is not a function)
$(this.options[y]).prop('disabled'); // Not working (prop is not a function)
}

<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" selected>Audi</option>
</select>

https://jsfiddle.net/wgv7hL5p/

希望你得到预期。

Answer 4

这可能会有所帮助(不需要jquery(

var options = document.querySelectorAll('select option');
options.forEach(function(option) {
console.log(
"Value: " + option.value, 
" disabled: " + option.disabled, 
" selected: " + option.selected
);
});

<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" selected>Audi</option>
</select>

Answer 5

您可以使用filter()函数选择禁用的元素，然后使用each()函数循环访问它们。

该prop()是用于属性的正确。您只想将attr()用于属性。

$('select option').filter(function(){
return $(this).prop('disabled');
}).each(function(){
console.log($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" selected>Audi</option>
</select>

Answer 6

使用each函数遍历元素：

$('select option').each((i, e) => {
console.log("option " + i + " disbaled = " + $(e).attr('disabled'));
console.log("option " + i + " selected = " + $(e).attr('selected'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" selected>Audi</option>
</select>

Answer 7

因为你正在使用jquery

$("#select option").each(function(i){
var option = $(this);
console.log(option.text() + " : " + option.val());
});

Answer 8

好吧，你也可以通过这种事情来实现这一点

for (var y = 0; y <= $('select option').length; y++){
$('select option').eq(y).prop('disabled',true);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" selected>Audi</option>
</select>