1

嗨，我需要将选定的下拉列表值传递给 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 传递它但没有成功，任何人都可以帮助我或就如何解决这个问题提供任何建议。

谢谢

4

5 回答 5

2

我猜您想使用 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 中，从 querystring 产品中读取值并返回要在对话框中显示给用户的相关 HTML 标记。如果您将 jQuery 和 jQuery UI 正确加载到您的页面，它将起作用。

该脚本将即时为弹出窗口本身创建一个 div。您不需要为此添加一页。

于 2012-04-25T13:49:25.550 回答
1

无论是否显示，您的下拉菜单都是页面的一部分。因此，您可以像操作任何下拉框一样操作它。就像是：

像这样设置值：

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

#product根据从下拉列表中选择的值填充这样的文本：

$("#product").text( $("#DropDownList1").val() );
于 2012-04-25T13:41:46.093 回答
1

您是否尝试过使用该.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();

    });

});

见 jsFiddle 演示

于 2012-04-25T13:42:30.560 回答
1

由于您在同一页面上，因此无需 Ajax 即可访问 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>
于 2012-04-25T13:46:07.223 回答
1

首先，您的问题中的脚本存在问题。

  • 准备好的文件格式不正确。
  • 登录选择器使用一个类，它应该是一个 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>
于 2012-04-25T14:54:06.003 回答