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()); } }); 

所有这些都是共享的,因为在飞行中学习这些东西花了太长时间。 希望这是有帮助的。