如果您知道索引,值或文本.如果您没有直接参考的ID,也可以.
示例标记
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>
Gra*_*eit 1161
按值获取中间option-element的选择器是
$('.selDiv option[value="SEL1"]')
对于索引:
$('.selDiv option:eq(1)')
对于已知文本:
$('.selDiv option:contains("Selection 1")')
编辑:如上所述,OP可能是在更改下拉列表的选定项目之后.在1.6及更高版本中,建议使用prop()方法:
$('.selDiv option:eq(1)').prop('selected', true)
在旧版本中:
$('.selDiv option:eq(1)').attr('selected', 'selected')
EDIT2:在Ryan的评论之后."选择10"上的匹配可能是不需要的.我找不到匹配全文的选择器,但过滤器有效:
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
编辑3:请谨慎使用,$(e).text()因为它可能包含换行符,使比较失败.当隐式关闭选项(无</option>标记)时会发生这种情况:
<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
:
</select>
如果您只是使用e.text任何额外的空格,就会删除尾随换行符,从而使比较更加健壮.
小智 118
上面没有一种方法提供了我需要的解决方案,所以我想我会提供适合我的方法.
$('#element option[value="no"]').attr("selected", "selected");
Lea*_*one 77
你可以使用val()方法:
$('select').val('the_value');
mpo*_*tto 52
根据价值,使用jQuery 1.7对我有用的是下面的代码,试试这个:
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
Gon*_*ing 15
有很多方法可以做到这一点,但最干净的方法已经在最重要的答案和大量的争论中丢失了val().从jQuery 1.6开始,一些方法也发生了变化,因此需要更新.
对于以下示例,我将假设变量$select是指向所需<select>标记的jQuery对象,例如通过以下内容:
var $select = $('.selDiv .opts');
对于值匹配,使用val()比使用属性选择器简单得多:https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
setter版本.val()是select通过设置selected匹配的属性在标签上实现option的value,因此在所有现代浏览器上都可以正常工作.
如果要直接设置选项的选定状态,可以使用prop(而不是attr)boolean参数(而不是文本值selected):
例如https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
如果您使用val()选择a <option>,但val不匹配(可能会发生取决于值的来源),则选择"nothing"并$select.val()返回null.
因此,对于显示的示例,为了健壮,您可以使用类似这样的内容https://jsfiddle.net/1250Ldqn/:
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
如果要按精确文本进行匹配,可以使用filterwith函数.例如https://jsfiddle.net/yz7tu49b/2/:
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
虽然如果您可能有额外的空格,您可能需要在支票中添加修剪,如下所示
return $.trim(this.text) == "some value to match";
如果你想通过索引匹配只是索引选择的孩子,例如https://jsfiddle.net/yz7tu49b/3/
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
虽然我现在倾向于避免使用直接的DOM属性来支持jQuery,以及面向未来的代码,所以也可以通过https://jsfiddle.net/yz7tu49b/5/来完成:
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
在上述所有情况下,更改事件都不会触发.这是设计使您不会结束递归更改事件.
要生成更改事件,如果需要,只需添加.change()对jQuery select对象的调用.例如,第一个最简单的例子变成https://jsfiddle.net/yz7tu49b/7/
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
还有很多其他方法可以使用属性选择器来查找元素[value="SEL2"],但是您必须记住,与所有其他选项相比,属性选择器相对较慢.
Yoe*_*ran 14
$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");
// or
$('#select option[value="myValue"]').prop("selected",true).trigger("change");
小智 13
你可以命名选择并使用它:
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
它应该选择你想要的选项.
小智 12
$(elem).find('option[value="' + value + '"]').attr("selected", "selected");
回答我自己的问题以获取文档.我确信还有其他方法可以实现这一点,但这样可行,并且此代码已经过测试.
<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
$(function() {
$(".update").bind("click", // bind the click event to a div
function() {
var selectOption = $('.selDiv').children('.opts') ;
var _this = $(this).next().children(".opts") ;
$(selectOption).find("option[index='0']").attr("selected","selected");
// $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
// $(selectOption).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[value='DEFAULT']").attr("selected","selected");
// $(_this).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[index='0']").attr("selected","selected");
}); // END Bind
}); // End eventlistener
</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>
</body>
</html>
使用jquery-2.1.4,我发现以下答案适合我:
$('#MySelectionBox').val(123).change();
如果您有字符串值,请尝试以下操作:
$('#MySelectionBox').val("extra thing").change();
其他例子对我不起作用,这就是我添加这个答案的原因.
我在以下网址找到了原始答案:https: //forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu
用于设置选择触发的选择值:
$('select.opts').val('SEL1').change();
要从范围设置选项:
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();
此代码使用选择器查找具有条件的选择对象,然后通过更改所选属性attr().
此外,我建议change()在设置属性后添加事件selected,这样代码将接近用户更改选择.
对于普通选择选项
<script>
$(document).ready(function() {
$("#id").val('select value here');
});
</script>
对于选择2选项，触发选项需要使用
<script>
$(document).ready(function() {
$("#id").val('select value here').trigger('change');
});
</script>
当我知道列表的索引时,我使用它.
$("#yourlist :nth(1)").prop("selected","selected").change();
这允许列表更改,并触发更改事件.":nth(n)"从索引0开始计数
小智 5
我会选择: -
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
/* This will reset your select box with "-- Please Select --" */
<script>
$(document).ready(function() {
$("#gate option[value='']").prop('selected', true);
});
</script>
您只需使用选择字段ID而不是#id（即#select_name）
代替选项值，请使用选择选项值
<script>
$(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
});
</script>
| 归档时间： |
|
| 查看次数： |
931368 次 |
| 最近记录： |