以编程方式触发下拉“onChange”

Question

我正在使用一些业务逻辑填充页面加载下拉列表，并且可能（或可能不）选择其中一个值，具体取决于 if 条件。

我不能：

1. 查找加载后选择的值（如果有）
2. 如果选择了任何值，则使用该选定值触发该下拉列表的“onChange”函数

我正在尝试的示例代码在这里： http : //jsfiddle.net/v7QWd/1203/

<div id="outerDiv">

<select id="myDropdown" class="check">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
</div>


$(document).ready(function () {

    //call on load
    someFunction();

     $(document).on('change', '#myDropdown', function() {
        localStorage.setItem('selected_val', $(this).val());
       alert($(this).val());

    });

    function someFunction(){
    var mycondition = "true";
    //run busines slogic
    var htmlVar = "";
    if(mycondition == 'true'){

    htmlVar = '<select id="myDropdown" class="check">'+
        '<option value="one">one</option>'+
        '<option value="two">two</option>'+
        '<option selected = "selected" value="three">three</option>'+
        '<option value="four">four</option>'+
        '</select>';
    }

    $("#outerDiv").empty();
    $("#outerDiv").append(htmlVar);

    }
});

该函数应该为值“三”触发自身（值可以根据运行时条件改变）。 所以基本上，在页面加载时，在这个例子中应该提醒“三”。

Answer 1

您可以在页面加载时手动调用更改事件：

$("#myDropdown").change();

这需要在someFunction()或#myDropdown不存在之后发生。

Answer 2

第一：不需要使用empty()然后.append()你可以直接使用html()

第二：更改事件不会运行，因为元素尚未呈现给 DOM，因此您需要检查html()是否已完成 .. 您需要使用$.when().then()

第 3 次触发事件，您可以使用.change()就像@Daniel 所说的.. 在change()事件之后而不是在它之前

 $(document).ready(function () { // change event $(document).on('change', '#myDropdown', function() { //localStorage.setItem('selected_val', $(this).val()); alert($(this).val()); }); //call on load $.when(someFunction()).then(function(){ $('#myDropdown').change(); }); }); // functions function someFunction(){ var mycondition = "true"; //run busines slogic var htmlVar = ""; if(mycondition == 'true'){ htmlVar = '<select id="myDropdown" class="check">'+ '<option value="one">one</option>'+ '<option value="two">two</option>'+ '<option selected = "selected" value="three">three</option>'+ '<option value="four">four</option>'+ '</select>'; } $("#outerDiv").html(htmlVar); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="outerDiv"></div>

Answer 3

试试下面

$(document).ready(function () { someFunction(); dropDownChange($('#myDropdown')); $(document).on('change', '#myDropdown', function() { dropDownChange($(this)); }); function dropDownChange(e){ localStorage.setItem('selected_val', e.val()); alert(e.val()); }; function someFunction(){ var mycondition = true; var htmlVar = ""; if(mycondition){ htmlVar = '<select id="myDropdown" class="check">'+ '<option value="one">one</option>'+ '<option value="two">two</option>'+ '<option selected = "selected" value="three">three</option>'+ '<option value="four">four</option>'+ '</select>'; } $("#outerDiv").html(htmlVar); }; });

http://jsfiddle.net/v7QWd/1207/