JQuery - 如何根据值选择下拉项
Posted
技术标签:
【中文标题】JQuery - 如何根据值选择下拉项【英文标题】：JQuery - how to select dropdown item based on value 【发布时间】：2012-02-03 08:44:40 【问题描述】：我想设置一个下拉（选择）以根据条目的值进行更改。
我有
<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 做到这一点？
【问题讨论】：
我以为就这么简单，但似乎没有用。我想现在是调试时间。 Selecting option by text content with jQuery的可能重复 你的标题有点误导。您不是在选择下拉菜单，而是在下拉菜单中选择一个选项...这就是为什么有 7 个答案对我没有帮助... @user1566694 如果您想获得技术知识，它实际上并不称为下拉菜单，而是“选择” 【参考方案1】：都可以用来获取选中的选项值
$('#dropdownID').on('change', function ()
var dropdownselected=$("#dropdownID option:selected").val();
);
or
$('#dropdownID').on('change', function ()
var dropdownselected=this.selectedOptions[0].value;
);
【讨论】：
【参考方案2】：$('select#myselect option[value="ab"]')
【讨论】：
了解 how to use code block 以显示您的代码【参考方案3】：你应该使用
$('#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>【讨论】：
同意上述。根据您的代码，它将是$('#mySelect option[value="fg"]').attr('selected', true)
我的错误。我已经看到它在某些情况下不起作用，但它显然在小提琴中起作用。
我会小心的。它不会触发
@ChadFisher 如果您正在使用更改事件，请使用$('#dropdownid').val('selectedvalue').trigger('change'); 触发它
当您编写了一些后续代码来执行某些操作（如模型更新）时，触发更改确实会有所帮助，即使是 ASP.net 视图模型更新也会发生在 DD 的更改事件上。 +1【参考方案4】：
这段代码对我有用：
$(function()
$('[id=mycolors] option').filter(function()
return ($(this).text() == 'Green'); //To select Green
).prop('selected', true);
);
使用此 html 选择列表：
<select id="mycolors">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
【讨论】：
【参考方案5】： $('#mySelect').val('ab').change();
// or
$('#mySelect').val('ab').trigger("change");
【讨论】：
或 $('#mySelect').val('ab').trigger("change");;如果您使用的是 select2 插件。 .change() 帮助我更新了我的 ASP.net MVC 模型属性。感谢您的回答。 谢谢... .trigger('change') 完美运行！【参考方案6】：您可以按名称选择下拉选项值
// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
if( jQuery(this).text() == 'Monday' )
jQuery(this).attr("selected","selected");
);
【讨论】：
【参考方案7】：$('#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>【讨论】：
【参考方案8】：你可以使用这个我觉得更容易使用的 jQuery 代码：
$('#your_id [value=3]').attr('selected', 'true');<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>【讨论】：
【参考方案9】：$('#yourdropddownid').val('fg');
可选，
$('select>option:eq(3)').attr('selected', true);
其中3 是您想要的选项的索引。
Live Demo
【讨论】：
【参考方案10】：我有不同的情况，下拉列表值已经被硬编码。只有 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 Also ... 要启用这样的控件，它是 (disabled, false) 和 NOT (enabled, true) - 这也需要一些时间来弄清楚。 :)
除了帖子之外，唯一需要注意的是：
/*
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());
);
全部共享，因为即时学习这些东西需要很长时间。希望这会有所帮助。
【讨论】：
你跑题了。问题是使用 JQuery 根据其值对选择进行简单更改。不涉及任何 UI 元素。【参考方案11】：回答可能为时已晚，但至少有人会得到帮助。
您可以尝试两种选择：
这是你想根据索引值赋值时的结果，其中'0'是索引。
$('#mySelect').prop('selectedIndex', 0);
不要使用 'attr'，因为它已被最新的 jquery 弃用。
当您想根据选项值进行选择时，请选择此：
$('#mySelect').val('fg');
其中'fg'是选项值
【讨论】：
很少使用基于索引的选择，但是考虑到您编写了一些通用代码来设置下拉菜单并且值随不同 DD 的不同而变化的场景，这是一个不错的选择。谢谢:)。【参考方案12】：在你的情况下$("#mySelect").val("fg") :)
【讨论】：
【参考方案13】：$('#mySelect').val('fg');...........
【讨论】：
【参考方案14】：你可以简单地使用：
$('#select_id').val('fg')
【讨论】：
以上是关于JQuery - 如何根据值选择下拉项的主要内容，如果未能解决你的问题，请参考以下文章