Question

我想知道是否有可能让jQuery选择具有预定义更改方法的选项。

让我举个例子;我有一个这样的下拉列表：

<select id="ddl_BankRequestType">
    <option>-- Request Type ---</option>
    <option value="val1">Item1</option>
    <option value="val2">Item2</option>
</select>

如果用户选择 Item1 或 Item2 ，将执行某些逻辑：

$('#ddl_BankRequestType').change(function () {
     var selectedItem = $(this).find(":selected").text();
     if (selectedItem === 'Item1') {
         // codes
     } else if (selectedItem === 'Item2') {
         //other codes
     }
});

它就像一个魅力。现在在document.ready我希望第二个选项被选中，所以我把这个代码：

$('#ddl_BankRequestType > option:eq(2)').attr('selected', true);

它也有效，但我希望 Item2 的逻辑能够执行。我尝试了以下内容，但他们什么都不做：

$('#ddl_BankRequestType > option:eq(2)').attr('selected', true).change();
$('#ddl_BankRequestType > option:eq(2)').attr('selected', true).trigger('change');

Answer 1

您可以查看DEMO

中的代码

$(function (){
  $('#ddl_BankRequestType').change(function () {
      var selectedItem = $(this).find(":selected").text();

      console.log(selectedItem)
      if (selectedItem === 'Item1') {
        alert('item1');
      } else if (selectedItem === 'Item2') {
        alert('item2');
      }
  });

  $('#ddl_BankRequestType > option:eq(2)').attr('selected', true).change();        

});

Answer 2

快速解决方案应该如下所示，

＆＃13;

$('#ddl_BankRequestType').on("change",function () {
     var selectedItem = $(this).find(":selected").text();
     if (selectedItem === 'Item1') {
	doItem1();
     } else if (selectedItem === 'Item2') {
	doItem2();
     }
});
function doItem1(){
	alert('Item1'); 
	//other codes
}
function doItem2(){
	alert('Item2');
	//other codes
}
$(document).ready(function(){
$('#ddl_BankRequestType > option:eq(2)').attr('selected', true);
doItem2();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddl_BankRequestType">
    <option>-- Request Type ---</option>
    <option value="val1">Item1</option>
    <option value="val2">Item2</option>
</select>

＆＃13;

Answer 3

问题是.attr()返回一个字符串。因此，您无法将其链接以触发更改事件。您可以执行以下操作：

   var ddl_BankRequestType = $('#ddl_BankRequestType');
   ddl_BankRequestType.find('option:eq(2)').attr('selected', true);
   ddl_BankRequestType.trigger('change');

Answer 4

这可能是一个时间问题 - 因为理论上你的代码应该根据你的方式触发该触发事件。我认为它只是在注册更改功能之前触发事件。 jQuery的文档加载生命周期按照他们注册的顺序循环遍历所有已定义的加载器，因此如果您将选项元素设置为＆＃34;选择＆＃34时无法更改;在绑定更改事件之后，您可以使用本机超时功能来确保它最后被触发。

我通常避免像这样使用超时，但在你的场景中它可能有用：

setTimeout(function() { /* Set the option element true here */ }, 1000);

最好的办法是在绑定更改事件后尝试设置元素。

如何使用更改方法更改DropDownList的选定值？

4 个答案: