从服务器选择加载选项

Question

我试图弄清楚单击按钮时如何更新我的选项选择菜单。 我可以使用$(#id).click(function(){});来完成这项工作$(#id).click(function(){}); 但是当从菜单中选择一个选项时，我还有另一个函数需要调用。 下面列出的代码将不起作用，因为它清除了我的选择菜单。 我相信这是因为click事件被调用了两次，一次是在第一次单击时发生，一次是在更改发生后第二次发生。

为了以一种可以同时使用两个事件的方式加载选择菜单的方法，我该怎么办。 也许我没有采用正确的方法，对于ajax和jquery我还是很陌生。

我的代码示例：

我的标记：

<div class="siteId">   Select Site:<select id="site" name="site" 
style="width: 60px"></select></div>

JavaScript：

getSiteId: function(){  // fill the option select menu

      $.ajax({

              type: "POST",
              url: "?do=getsiteid",
              dataType: "json",
              async: true,

              success: function(jsonObj) {

                     var listItems= "";                        
                     listItems+= "<option value='empty'></option>";         // fill first entry with a blank value

                       for (var i in jsonObj){

                               listItems+= '<option value=' + jsonObj[i].siteId + '>' + jsonObj[i].siteId + '</option>';
               }
              $("#site").html(listItems);
              }
       }); 
},

我的活动：

  $(document).ready(function() {

  $('.siteId').click(function(){
    Freight.getSiteId();
  });




  $('#site').change(function(){//event to load table based on user selection from menu

var siteId = $("#site").attr('value');
nEditing = null;
if(siteId != "empty"){
    $("#message").hide();  // hide message
    $("#new").show();      // show button
    $('#wrapper').empty(); // 
    $('#wrapper').replaceWith(Freight.tbl);

    Freight.displayData(siteId);

 oTable = $('#grid').dataTable( {
    "aoColumns": [ 
        /* Dest */   null,
        /* Port Id */  {"bSearchable": false,
                         "bVisible":    false},
                    /* woodType */ {"bSearchable": false,
                         "bVisible":    false},
        /* Cont Rate */ null,
        /* Edit */  null
    ]} );
}
    else{
    $("#wrapper").empty();
     $("#message").show();  // hide message
    $("#new").hide();      // show button

  } 
}); // end  



});

Answer 1

由于.click处理程序位于.siteId div上，因此当您单击div中的任何内容（包括SELECT菜单）时，都会被调用。 因此，SELECT的.change事件也会触发div的.click事件。 我会在“选择站点”文本周围放一个跨度，并将您的click事件放到该跨度上。