Question

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

Answer 1

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

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

Answer 2

~~如果您使用索引，可以使用.attr（）直接设置所选索引：~~

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

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

修改我上面这样做的方式曾经起作用。但它似乎不再存在。

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

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

Answer 3

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

/*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");

Answer 4

如果您的下拉列表是Asp.Net下拉列表，那么下面的代码将正常工作，

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

但是如果你的DropDown是HTML下拉，那么这段代码就可以了。

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

Answer 5

问题的最佳答案：

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

e.g：

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

或

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

Answer 6

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

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

OR

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

Answer 7

<强>尝试：

jQuery("#availability option:selected").val();

或者要获取该选项的文本，请使用text（）：

jQuery("#availability option:selected").text();

更多信息：

 http://api.jquery.com/val/
 http://api.jquery.com/text/

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />

Answer 8

这是一个快速设置所选选项的功能：

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');

当有许多选项要设置时，这很有用。

Answer 9

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

1）。为下拉列表的设置值创建单独的方法对于Ex：

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

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

对于Ex：

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

Answer 10

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

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

这里我们首先从Model设置值，然后在选择的

上更新它

Answer 11

//下拉列表的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);

Answer 12

我认为这可能有所帮助：

    $.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时，它不是apear，而是值-1，您使用$（“。autoCompleteDepartment”）添加了稍后的选择.val（-1）;让您控制组合是否具有有效值。

希望它可以帮助任何人。

抱歉我的英文。

Answer 13

使用上面突出显示/选中的答案对我有用...这里有一些见解。我在获取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>

Answer 14

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

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

Answer 15

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

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

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

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

Answer 16

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

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

只需在此处发布，以供将来引用此线程的人们使用。

Answer 17

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

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

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

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

更多信息：https://slaford.com/html/how-can-i-set-the-value-of-a-dropdown-list-using-jquery/

如何使用jQuery设置DropDownList的值？

17 个答案: