Question

我有一个包含3个选项的下拉菜单。此菜单显示在模态jQuery UI对话框中。

我可以打开对话框并选择三个选项之一。所选选项存储在变量中。这很好用。但是，如果我再次打开对话框并选择其他选项，则变量不会更改 - 它包含第一个选择的值。

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

希望你能帮助我。提前谢谢！

Answer 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>

jQuery UI下拉值不会改变

1 个答案: