Question

我正在使用一些业务逻辑填充页面加载的下拉列表，并根据if条件选择其中一个值MAY（或可能不会）。

我无法：

查找加载后选择的值（如果有）

触发＆＃39; onChange＆＃39;如果选择了任何值，则使用该选定值对该下拉列表起作用

我正在尝试的示例代码在这里： 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);

    }
});

该功能应自动触发值＆＃39;三＆＃39; （值可以根据运行时条件而变化）。所以基本上，在页面加载时，三个＆＃39;应该在这个例子中提醒。

Answer 1

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

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

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

Answer 2

第一名：无需使用empty()，然后.append()您可以直接使用html()

第二名：更改事件无法运行，因为该元素尚未显示给DOM，因此您需要检查html()是否已完成..您已经完成了需要使用$.when().then()

第三次触发事件，您可以使用.change() ，例如@Daniel说 .. change()事件发生之后

＆＃13;

$(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);

}

＆＃13;

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

＆＃13;

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/

触发下拉＆＃39; onChange＆＃39;编程

3 个答案: