logo标签列表

如何使用jQuery设置DropDownList的值？

jquerydrop-down-menu
383

如问题所述，如何使用jQuery设置DropDownList控件的值？

18个回答
650
$("#mydropdownlist").val("thevalue");

只需确保选项标签中的值与val方法中的值匹配即可。

我对下拉列表设置了一个范围验证器，并按照您上面描述的方式设置了下拉列表的值，但是范围验证器仍然失败，告诉我选择一个值（当所选值在范围内时）。请参见我的问题http://stackoverflow.com/questions/3165033/rangevalidator-not-working-when-selecting-dropdownlist-value-using-jquery - James
27
这不会触发“change”事件。 - AGamePlayer
5
重申一下，确保设置了“value”属性，否则该方法将无法工作。（我正在帮助一个人解决问题，他向我展示了这个问题，并想知道为什么不能通过下拉菜单中的文本进行选择。）希望这点能讲清楚。 - JasCav
2
+1 必须调用 $("#mycontrolId").selectmenu('refresh'); 来反映更改。 - VladL
详细信息请查看此链接：https://www.htmlgoodies.com/beyond/javascript/convert-a-list-into-a-select-dropdown-using-jquery.html - Niamath
75

如@Nick Berardi所建议，如果您修改的值没有在UI前端反映出来，请尝试：

$("#mydropdownlist").val("thevalue").change();
1
非常感谢，只需要一行就可以利用jQuery和Laravel表单来整洁地帮助提高SelectBox的change()事件。 - WhySoSerious
这是唯一一个答案，在下拉菜单中实际显示了更改。在我的jQuery版本中，selectmenu未定义，但change()可以解决问题。 - Chad Hedgcock
谢谢。这是我尝试了以上所有方法后唯一有效的方法。 - inspirednz
被接受的答案也是正确的，但在那个on change事件中没有起作用。而使用这种方法，on change事件也能够正常工作。 - LOKESH
.change()方法有一个神奇的效果，可以让这个解决方案在Bootstrap模态框内工作。 - Mahmoud
53

如果你正在使用索引，你可以使用 .attr() 直接设置所选索引：

$("#mydropdownlist").attr('selectedIndex', 0);

这将把它设置为下拉列表中的第一个值。

编辑： 我之前的做法曾经有效。但现在似乎不再起作用了。

但正如Han在评论中所指出的那样，正确的做法是：

$("#mydropdownlist").get(0).selectedIndex = index_here;
7
这段代码有问题，因为 select 标签没有名为 selectedIndex 的属性，这是 DOM 对象的属性。因此代码应该是：$("#mydropdownlist").get(0).selectedIndex = index_here; - Han
5
$("#mydropdownlist").prop('selectedIndex', index_here); 可以正常工作。 翻译描述：这是一行JavaScript代码，用于将下拉列表中的选定索引更改为给定的 index_here 值。 - numaroth
("#mydropdownlist").get(0).selectedIndex = index_here; 这种方式是可行的！@ - kasim
改变下拉菜单中所选内容的好方法，谢谢。 - Avtandil Kavrelishvili
我在回答中感受到了一些被动攻击的意味吗？ - some_groceries
$("#mydropdownlist").get(0).selectedIndex = index_here; 在 jQuery 3.3.1 中是可行的。 - Prasad
24

尝试这个非常简单的方法：

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");
2
不要忘记调用 $("#mycontrolId").selectmenu('refresh');。 - VladL
@VladL，你的意思是 $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected"); 吗？ - Dylan Czenski
这似乎可以在没有刷新添加的情况下工作；该添加似乎会立即停止其后面的任何向下JS代码。 - Ajowi
9
如果您的下拉菜单是Asp.Net下拉菜单，则以下代码将正常工作:
 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

但是，如果你的下拉菜单是HTML下拉菜单，那么这段代码将有效。
 $("#DropDownName")[0].selectedIndex=0;
6

该问题的最佳答案：

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

e.g:

$("#CityID").val(20).trigger("chosen:updated");

或者

$("#CityID").val("chicago").trigger("chosen:updated");
3
有许多方法可以完成这项任务。以下是其中的一些方法：
$("._statusDDL").val('2');

或者

$('select').prop('selectedIndex', 3);
1
您的个人资料显示您与此处包含的链接有关联。在未在帖子中披露该关联的情况下，将链接到您所属的某些东西（例如产品或网站）被视为 Stack Exchange/Stack Overflow 上的垃圾邮件。请参见：什么是“良好”的自我推广？，有关自我推广的一些提示和建议，Stack Overflow 的“垃圾邮件”确切定义是什么？以及什么会被视为垃圾邮件。 - Makyen
第二个例子是目前为止在页面上唯一有效的东西。 - Bbb
3

设置值并更新下拉列表事件

$("#id").val("1234").change();
3

如果你只需要设置下拉选项的值，最好的方法是：

$("#ID").val("2");

如果您需要在更新下拉列表值后触发任何脚本，比如如果您在下拉列表上设置了任何onChange事件并且希望在更新下拉列表后运行此事件，则需要使用以下方法：

$("#ID").val("2").change();
1
我认为这可能有帮助：

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

如果您按照这种方式操作，将会添加一个没有文本的元素。因此，当您单击组合框时，它不会出现，但是稍后使用$(".autoCompleteDepartment").val(-1);添加的值-1可以让您控制组合框是否具有有效值。
希望对任何人都有所帮助。
很抱歉我的英语不好。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接