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将下拉列表中的选定值传递到另一个服务器页面并获取响应并在Dialog中显示。这就是我将如何做到这一点。

$(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中，读取querystring产品中的值，并在对话框中返回要显示给用户的相关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而无需使用Ajax。

$(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“a＃login”，但更好的是“#login”作为一个id选择器将比标签更快。
我看不出你为什么要破坏对话框，而且你的标记中的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>

将参数传递给jqueryui对话框

5 个答案: