我想根据条目的值设置一个下拉列表(select)进行更改。
我有
<select id="mySelect">
<option value="ps">Please Select</option>
<option value="ab">Fred</option>
<option value="fg">George</option>
<option value="ac">Dave</option>
</select>
我知道我想更改下拉列表,以便选择值为“fg”的选项。我怎么能用JQuery做到这一点?
答案 0 :(得分:126)
$('#dropdownid').val('selectedvalue');
$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
<option value=''>- Please choose -</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='selectedvalue'>There we go!</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
答案 1 :(得分:21)
$('#yourdropddownid').val('fg');
任选地,
$('select>option:eq(3)').attr('selected', true);
其中3
是您想要的选项的索引。
<强> Live Demo 强>
答案 2 :(得分:15)
$('#mySelect').val('fg');...........
答案 3 :(得分:8)
您可以使用我认为可以使用的jQuery代码:
$('#your_id [value=3]').attr('selected', 'true');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="your_id" name="name" class="form-control input-md">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
</select>
&#13;
答案 4 :(得分:5)
您可以简单地使用:
$('#select_id').val('fg')
答案 5 :(得分:4)
$('#mySelect').val('ab').change();
答案 6 :(得分:2)
在您的情况下$("#mySelect").val("fg")
:)
答案 7 :(得分:1)
可能为时已晚,无法回答,但至少有一个人会得到帮助。
您可以尝试两种选择:
这是您希望根据索引值进行分配时的结果,其中“0”是索引。
$('#mySelect').prop('selectedIndex', 0);
不要使用'attr',因为它已被最新的jquery弃用。
如果要根据选项值进行选择,请选择此选项:
$('#mySelect').val('fg');
其中'fg'是选项值
答案 8 :(得分:1)
此代码对我有用:
aaaaa uuuu 200004025 2020-06-22 1
bbbbb rrrr 200004268 2020-06-23 7
bbbbb rrrr 200003092 2020-06-23 5
bbbbb kkkk 200004268 2020-06-23 412
使用此HTML选择列表:
$(function() {
$('[id=mycolors] option').filter(function() {
return ($(this).text() == 'Green'); //To select Green
}).prop('selected', true);
});
答案 9 :(得分:0)
您可以按名称选择下拉选项值
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
if( jQuery(this).text() == 'Monday' )
{
jQuery(this).attr("selected","selected");
}
});
答案 10 :(得分:0)
我有一种不同的情况,下拉列表值已经硬编码了。只有12个区域,因此jQuery自动完成UI控件不会被代码填充。
解决方案更容易。因为我不得不涉及其他假设控件是动态加载的帖子,所以没有找到我需要的东西,然后最终弄明白了。
因此,如果您拥有以下HTML,设置所选索引的设置如下,请注意-input部分,它是下拉ID的补充:
$('#project-locationSearch-dist-input').val('1');
<label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
<select id="project-locationSearch-dist" data-tabindex="1">
<option id="optDistrictOne" value="01">1</option>
<option id="optDistrictTwo" value="02">2</option>
<option id="optDistrictThree" value="03">3</option>
<option id="optDistrictFour" value="04">4</option>
<option id="optDistrictFive" value="05">5</option>
<option id="optDistrictSix" value="06">6</option>
<option id="optDistrictSeven" value="07">7</option>
<option id="optDistrictEight" value="08">8</option>
<option id="optDistrictNine" value="09">9</option>
<option id="optDistrictTen" value="10">10</option>
<option id="optDistrictEleven" value="11">11</option>
<option id="optDistrictTwelve" value="12">12</option>
</select>
有关自动完成控件的其他信息是如何正确禁用/清空它。我们有3个控件一起工作,其中2个是互斥的:
//SPN
spnDDL.combobox({
select: function (event, ui) {
var spnVal = spnDDL.val();
//fire search event
$('#project-locationSearch-pid-input').val('');
$('#project-locationSearch-pid-input').prop('disabled', true);
pidDDL.empty(); //empty the pid list
}
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();
//PID
pidDDL.combobox({
select: function (event, ui) {
var pidVal = pidDDL.val();
//fire search event
$('#project-locationSearch-spn-input').val('');
$('#project-locationSearch-spn-input').prop('disabled', true);
spnDDL.empty(); //empty the spn list
}
});
其中一些超出了帖子的范围,我不知道在哪里准确地说出来。由于这非常有用并花了一些时间来弄明白,所以它正在被分享。
Und另外......启用这样的控件,它(禁用,假)和NOT(启用,真) - 这也需要花费一些时间来弄清楚。 :)
除了帖子之外,唯一需要注意的是:
/*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked. Thus, it's created at that point in time
and its value must be picked fresh. Can't be put into a var and re-used
like the drop down list part of the UI control. So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL); But you can't
do this with the input part of the control. Winded explanation, yes. That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :)
*/
//district
$('#project-locationSearch-dist').combobox({
select: function (event, ui) {
//enable spn and pid drop downs
$('#project-locationSearch-pid-input').prop('disabled', false);
$('#project-locationSearch-spn-input').prop('disabled', false);
//clear them of old values
pidDDL.empty();
spnDDL.empty();
//get new values
GetSPNsByDistrict(districtDDL.val());
GetPIDsByDistrict(districtDDL.val());
}
});
所有人都分享了,因为花了很长时间才能动态学习这些东西。希望这有用。
答案 11 :(得分:0)
$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
<option value=''>- Please choose -</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='selectedvalue'>There we go!</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
答案 12 :(得分:0)
$('select#myselect option [value =“ ab”]')。