2012-02-24 76 views
1

我想弄清楚如何更新我的選項選擇菜單,當按鈕被點擊。 我可以通過使用$(#id).click(function(){});來完成這項工作,但我還有另一個功能,當從菜單中選擇一個選項時需要調用它。下面列出的代碼將不起作用,因爲它會清除我的選擇菜單。我相信這是因爲點擊事件被調用兩次,一次發生在第一次點擊和第二次發生變化之後。加載選項從服務器選擇

我能做些什麼來加載選擇菜單,我可以使用這兩種事件。也許我不會以正確的方式進行討論,但我仍然對ajax和jquery非常陌生。我的代碼

例子:

MyMarkup:

<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 



}); 

回答

0

因爲。點擊處理程序是你的。 siteId div它是g當你點擊你的div內的任何東西,包括SELECT菜單時,調用它。所以你的SELECT的.change事件也會觸發div的.click事件。我會圍繞「選擇網站」文本放置一個跨度,並將您的點擊事件放在跨度上。

+0

但是,不會讓文本點擊而不是組合框? – reagan 2012-02-24 19:35:46

+0

這是正確的。你想讓組合框可點擊以便觸發邏輯來獲得選項嗎?如果是這樣的話,你似乎需要一些邏輯來決定是否抓住選項。你是否只需要在第一次或任何時候點擊時獲取選項? – davidethell 2012-02-24 19:55:23

+0

1.當選項菜單被點擊時,它應該根據服務器的返回更新所有的選項。 2.下拉選項菜單還允許從菜單中選擇一個選項時觸發更改事件。 – reagan 2012-02-24 21:09:54