php - 从服务器加载选项选择

Question

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

我该怎么做才能以可以使用这两个事件的方式加载选择菜单。也许我没有以正确的方式处理这个问题，我对 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 事件。我会在“选择站点”文本周围放置一个跨度，并将您的点击事件放在该跨度上。