從服務器選擇加載選項

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事件放到該跨度上。