375

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

4

17 回答 17

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

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

于 2008-11-15T14:38:45.073 回答
67

正如@Nick Berardi 所建议的，如果您更改的值未反映在 UI 前端，请尝试：

$("#mydropdownlist").val("thevalue").change();
于 2015-12-21T11:20:44.377 回答
53

如果您使用索引，您可以直接使用 .attr() 设置选定的索引：

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

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

编辑： 我上面的做法曾经奏效。但现在好像没有了。

但正如韩在评论中愉快地指出的那样，正确的做法是：

$("#mydropdownlist").get(0).selectedIndex = index_here;
于 2011-11-17T10:13:08.987 回答
23

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

/*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");
于 2013-04-16T08:24:22.573 回答
9

如果您的下拉菜单是 Asp.Net 下拉菜单，那么下面的代码可以正常工作，

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

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

 $("#DropDownName")[0].selectedIndex=0;
于 2013-05-25T05:23:32.387 回答
5

该问题的最佳答案：

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

例如：

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

或者

$("#CityID").val("chicago").trigger("chosen:updated");
于 2018-03-10T10:28:08.253 回答
3

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

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

或者

$('select').prop('selectedIndex', 3);
于 2016-06-03T09:59:10.097 回答
3

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

$("#id").val("1234").change();
于 2019-05-30T11:30:02.787 回答
3

如果您只需要设置下拉列表的值，那么最好的方法是 

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

如果您必须在更新下拉列表值后触发任何脚本，例如如果您在下拉列表上设置任何 onChange 事件，并且您希望在更新下拉列表后运行它，那么您需要像这样使用 

$("#ID").val("2").change();
于 2019-11-11T12:10:59.043 回答
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);                                       
              }  
             );

如果这样做，您将添加一个没有文本的元素。因此，当您单击 de combo 时，它不会出现，但是您稍后使用 $(".autoCompleteDepartment").val(-1); 添加的值 -1 让您控制组合是否具有有效值。

希望它可以帮助任何人。

对不起我的英语不好。

于 2013-09-18T12:38:35.273 回答
1

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

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

如果您有一些 onchange 或任何其他带有下拉菜单的功能，您可以使用下面的代码。它可以触发您的 onchange 或其他一些功能。

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

More Informations: https://slaford.com/html/how-can-i-set-the-value-of-a-dropdown-list-using-jquery/

于 2021-06-18T05:27:28.877 回答
0

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

1）。为下拉
For 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)
}
于 2015-05-18T14:32:49.620 回答
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');

当有很多选择选项要设置时，它很有用。

于 2015-11-23T05:48:47.843 回答
0

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

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

在这里，我们首先设置值，Model然后在选择时更新它

于 2017-12-26T10:02:47.307 回答
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 将选中的 Item 更改为 test2。试试这个。// 设置下一个你想选择的选项

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);
于 2018-02-16T05:49:37.267 回答
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>
于 2018-06-28T14:10:26.853 回答
0

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

注意：即使.change()功能有效，如上面某些答案中所建议的那样，但它会触发该$('#elementId').change(function(){ //do something })功能。

只是将其发布在那里以供将来引用此线程的人使用。

于 2020-04-20T08:26:05.770 回答