JQuery – 如何select基于值的下拉项目
我想设置一个下拉(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>
而且我知道我想要更改下拉列表,select值为“fg”的选项。 我怎样才能做到这一点与JQuery?
$('#dropdownid').val('selectedvalue');
$('#yourdropddownid').val('fg');
(可选)
$('select>option:eq(3)').attr('selected', true);
其中3
是您想要的选项的索引。
现场演示
$('#mySelect').val('fg');...........
你可以简单地使用:
$('#select_id').val('fg')
$('#mySelect').val('ab').change();
在你的情况$("#mySelect").val("fg")
🙂
可能来不及回答,但至less有一个人会得到帮助。
你可以尝试两个选项:
这是您想要根据索引值分配的结果,其中“0”是索引。
$('#mySelect').prop('selectedIndex', 0);
不要使用“attr”,因为它是最新的jQuery不推荐使用。
当你想要select基于选项的价值,然后select这个:
$('#mySelect').val('fg');
其中“fg”是选项值
您可以按名称select下拉选项值
jQuery("#option_id").find("option:contains('Monday')").each(function() { if( jQuery(this).text() == 'Monday' ) { jQuery(this).attr("selected","selected"); } });
我有一个不同的情况,下拉列表值已经硬编码。 只有12区,所以jQuery自动完成UI控件不是由代码填充。
解决scheme要容易得多。 因为我不得不通过其他职位,假设控制dynamic加载,没有find我所需要的,然后终于弄清楚了。
因此,如下所示的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 } });
其中一些超出了post的范围,我不知道该把它放在哪里。 由于这是非常有用的,花了一些时间来弄清楚,这是共享的。
另外…启用这样的控制,它是(禁用,错误)和不(启用,真) – 这也花了一些时间来弄清楚。 🙂
除了这篇文章之外,唯一需要注意的是:
/* 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()); } });
所有这些都是共享的,因为在飞行中学习这些东西花了太长时间。 希望这是有帮助的。