如何使用 jQuery 设置 DropDownList 的值？

Posted 2023-02-16

技术标签:

【中文标题】如何使用 jQuery 设置 DropDownList 的值？【英文标题】：How can I set the value of a DropDownList using jQuery? 【发布时间】：2010-09-22 11:59:04 【问题描述】：

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

【问题讨论】：

【参考方案1】：

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

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

【讨论】：

我有一个针对下拉列表的范围验证器，并且我正在设置下拉列表的值，如上所述，但范围验证器一直未能告诉我选择一个值（当选择的值在范围内）。请看我的问题***.com/questions/3165033/… 这不会触发“更改”事件。想重申-确保您设置了“值”属性，否则此方法将不起作用。（我正在帮助向我展示此内容的人，并且想知道为什么它没有通过下拉列表中的文本进行选择。）想要确保清楚。 +1 必须致电 $("#mycontrolId").selectmenu('refresh'); 以反映更改详细信息在此链接htmlgoodies.com/beyond/javascript/…【参考方案2】：

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

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

【讨论】：

非常感谢，只需一行，简洁且有助于使用 jQuery 和 Laravel 表单引发 SelectBox 的 change() 事件。这是下拉菜单中实际显示更改的唯一答案。 selectmenu 在我的 jQuery 版本中未定义，但 change() 可以解决问题。谢谢。这是它对我有用的唯一方法（在尝试了以上所有其他方法之后）。已接受的答案也是正确的，但在更改事件中不起作用。并用这种方法。 On change 事件也在起作用。【参考方案3】：

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

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

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

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

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

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

【讨论】：

现在，这根本不起作用，因为select 标签没有任何名为selectedIndex 的属性。它是 DOM 对象的属性。因此代码应该是：$("#mydropdownlist").get(0).selectedIndex = index_here; $("#mydropdownlist").prop('selectedIndex', index_here); 也可以。 ("#mydropdownlist").get(0).selectedIndex = index_here;这种方式行得通！@ 在下拉列表中更改选择的好方法，谢谢我是否感觉到答案中有一些消极的攻击性【参考方案4】：

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

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

【讨论】：

别忘了致电$("#mycontrolId").selectmenu('refresh'); @VladL 所以你的意思是$('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");? 这似乎在没有刷新添加的情况下工作；该添加似乎会立即停止任何向下的 JS 代码。【参考方案5】：

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

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

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

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

【讨论】：

【参考方案6】：

问题的最佳答案：

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

例如：

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

或

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

【讨论】：

【参考方案7】：

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

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

或

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

【讨论】：

您的个人资料表明您与此处包含的链接相关联。 在您的帖子中链接到您所属的事物（例如产品或网站）而未在您的帖子中披露该从属关系在 Stack Exchange/Stack Overflow 上被视为垃圾邮件。请参阅：What signifies "Good" self promotion?、some tips and advice about self-promotion、What is the exact definition of "spam" for Stack Overflow? 和 What makes something spam。第二个例子是页面上唯一对我有用的东西【参考方案8】：

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

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

【讨论】：

【参考方案9】：

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

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

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

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

【讨论】：

【参考方案10】：

我认为这可能会有所帮助：

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

希望对大家有所帮助。

对不起我的英语。

【讨论】：

【参考方案11】：

只需确保选项标签中的值与 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/

【讨论】：

【参考方案12】：

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

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

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

【讨论】：

【参考方案13】：

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

1)。为下拉的设置值创建一个单独的方法例如：

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)

【讨论】：

【参考方案14】：

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

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

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

【讨论】：

【参考方案15】：

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

【讨论】：

【参考方案16】：

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

【讨论】：

【参考方案17】：

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

注意：即使.change() 函数也有效，正如上面一些答案中所建议的那样，但它会触发$('#elementId').change(function() //do something ) 函数。

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

【讨论】：

这不起作用，因为 selectpicker 不是刚刚测试过的操作。 userCms.php:595 Uncaught TypeError: $(...).selectpicker is not a function【参考方案18】：

//customerDB is an Array  
for(i of customerDB)   

      //create option and add to drop down list 
      var set = `<option value=$i.id>$i.id</option>`;
      $('#dropDown').append(set);

  


// print dropdown values on console
$('#dropDown').click(function()
      console.log($(this).val())
)

【讨论】：

以上是关于如何使用 jQuery 设置 DropDownList 的值？的主要内容，如果未能解决你的问题，请参考以下文章