[英]How to select specific option?
Suppose I have a select with these options: 假设我可以选择以下选项:
<select class="criteria">
<option id-criteria="1" value="1"></option>
<option id-criteria="2" value="1"></option>
</select>
I want select the value of the option with id-criteria
equal to 1
, so I tried: 我想选择
id-criteria
等于1
的选项的值,所以我尝试了:
$('.criteria').find('option[id-criteria="1"]').val(1);
but this not works 但这不起作用
If you want to select the option with value of 1 use 如果要选择值为1的选项,请使用
$('.criteria').val('1');
if you have multiple .criteria
and you want it to apply only when the id-criteria="1"
then use 如果您有多个
.criteria
并且希望仅在id-criteria="1"
应用,
$('.criteria').find('option[id-criteria="1"][value="1"]').prop('selected', true);
demo 演示
$('.criteria').find('option[id-criteria="1"][value="1"]').prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <select class="criteria"> <option>select an option</option> <option id-criteria="1" value="1">option 1</option> <option id-criteria="2" value="1">option 2</option> </select>
If you're looking to select the option with an id-criteria value of 1 and a value property of 1, you can use the same attribute selector syntax that you're using now, but add in the value: 如果要选择id-criteria值为1且value属性为1的选项,则可以使用与现在使用的相同的属性选择器语法,但要添加以下值:
$('.criteria').find('option[id-criteria="1"][value="1"]')
$('.criteria').find('option[id-criteria="1"][value="1"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="criteria"> <option id-criteria="1" value="1"></option> <option id-criteria="2" value="1"></option> </select>
If I'm understanding, you have two options with the same value. 据我了解,您有两个具有相同值的选项。 You want to select specifically the one with
id-criteria=1
and value=1
. 您要专门选择
id-criteria=1
和value=1
。
$('.criteria') .children() //Get all options .removeAttr("selected") //Remove their 'selected' attribute .end() //Refer back to <select> .children('option[id-criteria="1"][value="1"]') //Find option .attr("selected",true); //Select it
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="criteria"> <option selected>Example</option> <option>Another Example</option> <option id-criteria="1" value="1">Criteria: 1, Value: 1</option> <option id-criteria="2" value="1">Criteria: 2, Value: 1</option> </select>
For anyone curious as to why I've chosen to deselect the previous values, it's mostly for consistency in attribute-based selections. 对于谁对为什么我选择取消选择先前的值感到好奇的人,主要是为了保持基于属性的选择的一致性。 For example, if you had CSS to style the selected element of this dropdown, not removing the
selected
attribute would cause multiple elements to appear selected. 例如,如果您有CSS为该下拉菜单的选定元素设置样式,则不删除
selected
属性将导致多个元素显示为selected。
$('.criteria') .children('option[id-criteria="1"][value="1"]') //Find option .attr("selected",true); //Select it
option[selected] { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="criteria"> <option selected>Example</option> <option id-criteria="1" value="1">Criteria: 1, Value: 1</option> </select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.