0

3 つのオプションを含むドロップダウン メニューがあります。このメニューは、モーダルjQuery UIダイアログ内に表示されます。

ダイアログを開いて、3 つのオプションのいずれかを選択できます。選択したオプションは変数に格納されます。これはうまくいきます。しかし、ダイアログを再度開いて別のオプションを選択すると、変数は変更されず、最初の選択の値が含まれます。

$("#button").click(function() 
{   
    var diag = "<select id='diagDropdown'>"
            +"<option>Option 1</option>"
            +"<option>Option 2</option>"
            +"<option>Option 3</option>"
               +"</select>";

    $(diag).dialog(
        {title: "Choose Option"},
        {autoOpen: "false"},
        {modal: "true"},
        {draggable: "false"},
        { buttons: {OK: dialogOK} });       

    function dialogOK() 
    {
        var chosenOption=$("#diagDropdown option:selected").val().toLowerCase();

        //working with chosen option
        $(this).dialog("close");                                                                
    });

あなたが私を助けてくれることを願っています。前もって感謝します！

4

1 に答える 1

1

問題は、ID「ボタン」の要素をクリックするたびに、新しいダイアログでID「diagDropdown 」の新しいドロップダウンを作成していることです。

次に、あなたのコード：

var chosenOption=$("#diagDropdown option:selected").val().toLowerCase();

DOM で ID " diagDropdown "を持つ最初のドロップダウンを常に選択しています。

これを試して ：

<input type="button" value="click me" id="button"/>

<script type="text/javascript">
    // On DOM ready
    $(function() {

        var dropdown = 
            $('<select id="diagDropdown"> ' +
                '<option>Option 1</option>' +
                '<option>Option 2</option>' +
                 '<option>Option 3</option>' +
             '</select>');

        // Create the dialog (only once)
        dropdown.dialog({
            title: "Choose Option",
            autoOpen: false,
            modal: true,
            draggable: false,
            buttons: {
                "OK": function() {
                    var chosenOption=$('#diagDropdown option:selected').val().toLowerCase();
                    //working with chosen option
                    $(this).dialog('close');
                }
            }
        });

        // Bind click event : on click just open the existing dialog 
            $('#button').click(function() {
                $('#diagDropdown').dialog('open');
            });
    });
</script>
于 2013-03-20T15:07:24.717 に答える