將參數傳遞給jqueryui對話框

Question

嗨我需要將選定的下拉列表值傳遞給jqueryui對話框，當用戶點擊鏈接時，例如， 如果使用用戶選擇產品一，然後單擊鏈接，則對話框應彈出產品1中選擇顯示，我可以顯示該對話框：

<script> 
    $(document).ready({ 
    $('a.login').click(function(){ 

     $("#dialog:ui-dialog").dialog("destroy"); 

     $("#product").dialog({ 
      height: 140, 
      modal: true 
     }); 
    }); 
    </script> 

<div class="login-homepage"> 
    <asp:DropDownList ID="DropDownList1" runat="server"> 
    <asp:ListItem Text="product1" Value="product1">Camera</asp:ListItem> 
    <asp:ListItem Text="product2" Value="product2">DVD</asp:ListItem> 
    <asp:ListItem Text="product3" Value="product3">LCD</asp:ListItem> 
    </asp:DropDownList> 
<a href="#" id="login">login</a> 
<div id="product" title="product-container"> 
    //show the selected dropdownlist 
</div> 

的問題是我不能夠 通過下拉列表中選擇的值，我嘗試使用AJAX JSON來沒有傳遞成功由於缺乏知識， 任何人都可以幫助我或提供任何建議如何解決這個問題。

感謝

Answer 1

我想你想從下拉列表中選擇的值傳遞到另一個服務器頁面使用ajax並獲得響應並顯示在對話框中。這是我將如何做到這一點。

$(function(){ 

$('a.login').click(function(){ 

    var selectedVal=$("#DropDownList1").val(); 
    var url="myserverpage.aspx?product="+selectedVal; 

     var dialog = $("#dialog"); 
     if ($("#dialog").length == 0) { 
      dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body'); 
     } 
     dialog.load(
      url, 
      {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object 
      function (responseText, textStatus, XMLHttpRequest) { 
       dialog.dialog({      
        close: function (event, ui) {        
         dialog.remove(); 
        }, 
        modal: true, 
        width: 460 
       }); 
      } 
     ); 
    }); 

}); 

並在myserverpage.aspx，閱讀從查詢字符串產品的價值和回報要顯示的對話框中的用戶相關的HTML標記。它會工作，如果你有正確的jQuery和jQuery UI加載到你的頁面。

該腳本將爲彈出窗口本身創建一個div。你不需要爲此添加一個頁面。

Answer 2

你的下拉是你的網頁的一部分，無論是顯示或不顯示。因此，您可以像處理任何下拉框一樣操作它。喜歡的東西：

這樣設置值：

$("#DropDownList1").val("product2"); 

填充的#product這樣的文本的基礎上，從下拉列表中選擇的值：

$("#product").text($("#DropDownList1").val()); 

Answer 3

您是否嘗試過使用.html()方法？你可以這樣做：

$(document).ready({ 

    $("a#login").click(function(e) { 

     $("#dialog:ui-dialog").dialog("destroy"); 

     $("#product").dialog({ 

      height: 140, 
      modal: true 

     }).html($("#DropDownList1 option:selected").attr("Text")); 

     e.preventDefault(); 

    }); 

}); 

See jsFiddle Demo

Answer 4

由於您在同一個頁面上，你可以訪問DOM，而無需阿賈克斯。

$(document).ready({ 
    $('a.login').click(function(){ 

     $("#dialog:ui-dialog").dialog("destroy"); 
     $("#product .product-info").html('You have selected product ' + $("#DropDownList1").val() + ' from the list.'); 
     $("#product").dialog({ 
      height: 140, 
      modal: true 
    }); 
}); 


<div id="product" title="product-container"> 
    <div class="product-info"></div> 
</div> 

Answer 5

首先，您的問題中存在腳本問題。

• 準備好的文件形成不當。
• 登錄選擇器使用一個類，它應該是一個ID「一個＃登錄」，但更好的是「#login」，因爲ID選擇器將比標籤更快。
• 我看不出爲什麼你做的對話框銷燬，並且該標識甚至沒有在您的標記。
• 我認爲你首先不需要自動打開對話框，然後在注入新的選擇值後打開它。

您希望從列表中選擇，然後在對話框中動態填充另一個列表。

這些都不是太難，但需要一些返工才能使它做你想做的。因此，我將這個樣本與你陳述的願望一起呈現。

你會想加強這個來滿足你的最終產品，可能有一些Ajax的東西來填充對話框中的產品列表等，但它應該讓你開始。

見下面在這裏工作副本：http://jsfiddle.net/MarkSchultheiss/u8TMh/1/

$(document).ready(function() { 
    $("#productdialog").dialog({ 
     height: 140, 
     modal: true, 
     autoOpen: false 
    }); 

    $('a#login').click(function() { 
     var pick = $('#DropDownList1 option:selected').text(); 
     var pickVal = $('#DropDownList1 option:selected').val() 
     $('#showem').text($('#DropDownList1 option:selected').text()); 
     var insertCount = 4; 
     var optionList = ''; 
     while (insertCount--) { 
      optionList = optionList + '<option value="' + pickVal + insertCount + '">' + pick + insertCount + '</option>'; 
     }; 
     $('#DialogList').html(optionList); 
     $("#productdialog").dialog("open"); 
    }); 
}); 

，並標記爲我的「樣本」：

<select id="DropDownList1"> 
    <option value="product1">Camera</option> 
    <option value="product2">DVD</option> 
    <option value="product3">LCD</option> 
</select> 
<a href="#" id="login">login</a> 
<div id="product" title="product-container">show the selected dropdownlist </div> 
</div> 
<div title='showproducts' id='productdialog' style="display:none"><div id='showem'></div> 
<select id="DialogList"> 
</select> 
</div>