加載jQuery對話框與服務器級聯下拉列表

Question

我有一個jQuery對話框，需要打開並填充數據庫中的數據。在「新」模式（不編輯重新保存）級聯時，對話框中有對話框。

我如何可以加載與數據庫中的值的對話框，而在同一時間導致級聯發生。

我已經當使用對話框中「編輯」模式對話框的onfocus事件並列，但重點打擊每一個元素獲得焦點的時間。沒有被編輯模式偷偷摸摸地工作。

我試圖打開對話框，並使用jQuery設置下拉菜單中，其作品，但隨後的級聯確實工作。

對於級聯，我在不同的下拉菜單上使用.change。

不知道該代碼會幫助，但會發布一些對itterate我使用jQuery的功能。

的問題是：如何打開一個對話框，負載的下拉列表中的信息從服務器，並有.change功能的工作？

$('#collectDD').change(function(){ 
     // first change the item drop down list 
     var collection = $('#collectDD').val(); 

     data = "coll=" + collection + "&action=getItems&func="; 
     $('#addCollection').text(collection); 

     $.ajax({ 
      url: "getItemList.php", 
      type: "GET", 
      cache: false, 
      data: data, 
      success: function (html) { 
       $('#itemDD').empty(); 
       $("#itemDD").html(html);    
       // now update the function collection dropdown 
       data = "coll=" + collection + "&action=getFunction"; 

      } 
     }); 

集DD HTML

<select id="collectDD" name="collectionDD"> 
     <option>Select Collection</option> 
     <option>Option1</option> 
    </select> 

Answer 1

這並不完全符合了你的變量名稱，和我做了一點點變化的data字符串，但我認爲這是符合你是在尋找

<div id="dialogbox"> 
    <select id="s1"></select> 
    <select id="s2"></select> 
    <select id="s3"></select> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#dialogbox").dialog({ 
     open: function(event, ui) { 
      var s1 = $("#s1").empty(); 
      var s2 = $("#s2").empty(); 
      var s3 = $("#s3").empty(); 

      s1[0].enabled = false; 
      s2[0].enabled = false; 
      s3[0].enabled = false; 

      //load first dropdown from the database 
      var data = "coll=dropdown1&val=&action=getItems&func="; 
      $.ajax({ 
       url: "getItemList.php", 
       type: "GET", 
       cache: false, 
       data: data, 
       success: function (html) { 
        s1.html(html); 
        s1[0].enabled = true; 
       } 
      }); 

      //load the second DD when the first changes 
      s1.change(function() { 
       s2[0].enabled = false; //disable until after ajax load 
       s3[0].enabled = false; 

       data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func="; 
       $.ajax({ 
        url: "getItemList.php", 
        type: "GET", 
        cache: false, 
        data: data, 
        success: function (html) { 
         s2.empty().html(html); 
         s2[0].enabled = true; 
        } 
       }); 
      }); 

      s2.change(function() { 
       if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads 
        s3[0].enabled = false; 

        data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func="; 
        $.ajax({ 
         url: "getItemList.php", 
         type: "GET", 
         cache: false, 
         data: data, 
         success: function (html) { 
          s3.empty().html(html); 
          s3[0].enabled = true; 
         } 
        }); 
       } 
      }); 
     } 
    }); 
    }); 
</script> 

UPDATE

這裏是自己的功能與變化的功能的一例

<div id="dialogbox"> 
    <select id="s1"></select> 
    <select id="s2"></select> 
    <select id="s3"></select> 
</div> 

<script type="text/javascript"> 
    var s1, s2, s3, data; 

    $(document).ready(function() { 
     s1 = $("#s1").empty(); 
     s2 = $("#s2").empty(); 
     s3 = $("#s3").empty(); 

     $("#dialogbox").dialog({ 
      open: function(event, ui) { 
       s1[0].enabled = false; 
       s2[0].enabled = false; 
       s3[0].enabled = false; 

       //load first dropdown from the database 
       data = "coll=dropdown1&val=&action=getItems&func="; 
       $.ajax({ 
        url: "getItemList.php", 
        type: "GET", 
        cache: false, 
        data: data, 
        success: function (html) { 
         s1.html(html); 
         s1[0].enabled = true; 
        } 
       }); 

       //load the second DD when the first changes 
       s1.change(changeDD1); 

       //load the third DD when the second changes 
       s2.change(changeDD2); 
      } 
     }); 
    }); 

    function changeDD1() { 
     s2[0].enabled = false; //disable until after ajax load 
     s3[0].enabled = false; 

     data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func="; 
     $.ajax({ 
      url: "getItemList.php", 
      type: "GET", 
      cache: false, 
      data: data, 
      success: function (html) { 
       s2.empty().html(html); 
       s2[0].enabled = true; 
      } 
     }); 
    } 

    function changeDD2() { 
     if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads 
      s3[0].enabled = false; 

      data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func="; 
      $.ajax({ 
       url: "getItemList.php", 
       type: "GET", 
       cache: false, 
       data: data, 
       success: function (html) { 
        s3.empty().html(html); 
        s3[0].enabled = true; 
       } 
      }); 
     } 
    } 
</script> 

在http://jqueryui.com/demos/dialog/