更改还是关注jQuery？ 我应该使用哪个事件与select下拉列表来调用jQuery-AJAX函数？

Question

我在HTML中有一个选择下拉控件，如下所示：

<select id="student" name="student" class="form-control"></select>

我想调用jQuery-AJAX函数，该函数会将选项值添加到上述HTML select控件中。

以下是我为此编写的代码：

    $.ajax({
      url : "http://google.com",
      cache: false,
      dataType: "json",
      type: "GET",
      async: false,
      data: {
        'request_type':'ajax', 
        'op':'get_all_students'
      },
      success: function(result, success) { 
        $('#student').html(result);
      },
      error: function() {
        alert("Error is occured");
      }
    });

我的问题是我应该调用上述jQuery-AJAX函数以选择添加HTML下拉列表中的事件，以便动态添加选项值？

请给我建议正确的方法。

Answer 1

页面加载是一个不错的选择。

jQuery(function($) {
   // Ajax call populate select options
   $.ajax({ /* ... */ });
});

如果它依赖于其他选定元素，则在第一个下拉列表上绑定change事件，例如嵌套的下拉列表

<select id="teacher" name="teacher" class="form-control">
    <option value="">Please select</option>
    <option value="1">Teacher 1</option>
    <option value="2">Teacher 2</option>
</select>
<select id="student" name="student" class="form-control"></select>

<script type="text/javascript">
jQuery(function($) {
   $("#teacher").on('change', function() {
       // Ajax call populate select options
       $.ajax({ /* ... */ });
   });
});
</script>

Answer 2

在select上侦听change事件，然后创建动态的<option>元素，并在其中#student元素：

 var data = { 1: [{name: "Alice", id: 1}, {name: "Bob", id: 2}], 2: [{name: "Carol", id: 2}, {name: "Dave", id: 3}] }; function getStudents() { var result = data[$("#school").val()]; var $options = []; $.each(result, function (i, c) { var $opt = $("<option>"); $opt.attr({ value: c.id }).text(c.name); $options.push($opt); }); $("#students").append($options); } $("#school").on("change", getStudents); getStudents(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="school"> <option value="1">School 1</option> <option value="2">School 2</option> </select> <select id="students"></select>