如何使用jQuery设置DropDownList的值?


349

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

Answers:


602
$("#mydropdownlist").val("thevalue");

只需确保options标记中的值与val方法中的值匹配即可。


我有一个针对下拉列表的范围验证器,并且如上所述,我正在设置下拉列表的值,但是范围验证器始终无法告诉我选择一个值(当选定的值在范围内时)。请参阅我的问题stackoverflow.com/questions/3165033/…–
詹姆斯

21
这不会触发“更改”事件。
AGamePlayer

4
想要重申-确保设置了“值”属性,否则此方法将不起作用。(我正在帮助某个向我展示此内容的人,并且想知道为什么未通过下拉列表中的文本进行选择。)想要确保这一点很明确。
JasCav 2013年

1
+1必须打电话$("#mycontrolId").selectmenu('refresh');以反映变化
VladL


52

如果使用索引,则可以直接使用.attr()设置所选索引:

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

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

编辑: 我做上面的方式曾经工作。但似乎不再。

但是正如Han在评论中愉快地指出的那样,正确的做法是:

$("#mydropdownlist").get(0).selectedIndex = index_here;

7
现在,这根本不起作用,因为selecttag没有名为的任何属性selectedIndex。而是DOM对象的属性。因此,代码应为:$("#mydropdownlist").get(0).selectedIndex = index_here;
汉,

5
$("#mydropdownlist").prop('selectedIndex', index_here); 也可以。
numaroth

(“ #mydropdownlist”)。get(0).selectedIndex = index_here; 这样是
可行的

更改下拉列表的绝佳方法,谢谢
Avtandil Kavrelishvili

我在答案中感觉到一些消极的侵略吗
Dheeraj

49

根据@Nick Berardi的建议,如果您更改的值未反映在UI前端,请尝试:

$("#mydropdownlist").val("thevalue").change();

1
非常感谢,只有一行很整洁,并且对使用jQuery和Laravel Forms引发SelectBox的change()事件很有帮助。
WhySoSerious

这是下拉菜单中实际显示更改的唯一答案。selectmenu在我的jQuery版本中未定义,但是change()可以解决问题。
乍得Hedgcock

谢谢。这是它对我有用的唯一方法(尝试了以上所有其他方法之后)。
启发

20

试试这个非常简单的方法:

/*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 '16

9

如果您的下拉菜单是Asp.Net下拉菜单,则以下代码可以正常工作,

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

但是,如果您的DropDown是HTML下拉菜单,则此代码将起作用。

 $("#DropDownName")[0].selectedIndex=0;

5

问题的最佳答案:

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

例如:

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

要么

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


2

有很多方法可以做到这一点。这里是其中的一些:

$("._statusDDL").val('2');

要么

$('select').prop('selectedIndex', 3);

1
您的个人资料表明您已与此处包含的链接相关联。链接到您所隶属的内容(例如产品或网站)而未透露帖子中的从属关系则被视为Stack Exchange / Stack Overflow上的垃圾邮件。请参阅:什么表示“良好”的自我提升?自我推销一些提示和建议什么是“垃圾邮件”的堆栈溢出的确切定义是什么?,以及什么导致垃圾邮件
Makyen '19

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。让您控制组合是否具有有效值。

希望它能对任何人有帮助。

对不起我的英语不好。


1

如果您只需要设置下拉菜单的值,那么最好的方法是

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

如果您必须在更新下拉列表值后触发任何脚本,例如,如果您在下拉列表上设置了任何onChange事件,并且想要在更新下拉列表后运行此脚本,则需要像这样使用

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

0

这是一项用于快速设置所选选项的功能:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

使用参数元素id和选定值调用此函数;像这样:

SetSelected('selectID','some option');

当要设置许多选择选项时,此功能很有用。


0

如果<options ....></options>通过Ajax调用加载所有内容,请
按照以下步骤进行操作。

1)。
为Ex 的下拉菜单设置值创建单独的方法:

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2)。当ajax调用成功所有html追加任务完成时,调用此方法

例如:

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}

0

设置drop-down selected值并更新更改

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

在这里,我们首先从中设置值,Model然后根据选定值进行更新


0

//下拉列表的HTML格式。

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

//如果您想使用javascript将所选项目更改为test2。试试这个。//设置您要选择的下一个选项

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);

0

使用上面突出显示/选中的答案对我有用...这是一些见解。我在获取URL上作了一些欺骗,但是基本上我是在Javascript中定义URL,然后通过上面的jquery答案进行设置:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

0

对于使用Bootstrap的人,请使用$(#elementId').selectpicker('val','elementValue')代替$('#elementId').val('elementValue'),因为后者不会更新UI中的值。

注意.change()如上文在某些答案中建议的那样,即使函数也可以工作,但是会触发$('#elementId').change(function(){ //do something })函数。

只是将其发布在那里,供以后引用该线程的人们使用。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.