1

こんにちは、ユーザーがリンクをクリックしたときに、選択したドロップダウン リストの値を jqueryui ダイアログ ボックスに渡す必要があります。ダイアログボックスを表示できます：

<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 では、クエリ文字列製品から値を読み取り、ダイアログでユーザーに表示する関連する HTML マークアップを返します。jQuery と jQuery UI がページに適切にロードされていれば機能します。

スクリプトは、その場でポップアップ自体の div を作成します。そのためにページを 1 つ追加する必要はありません。

于 2012-04-25T13:49:25.550 に答える
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

ドロップダウンは、表示されているかどうかにかかわらず、ページの一部です。したがって、ドロップダウン ボックスと同じように操作できます。何かのようなもの：

次のように値を設定します。

$("#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

まず、質問のスクリプトに問題があります。

  • ドキュメント レディの形式が正しくありません。
  • ログイン セレクターはクラスを使用し、id は "a#login" である必要がありますが、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>
于 2012-04-25T14:54:06.003 に答える