Jquery ui jQuery UI下拉列表值不会更改

我有一个包含3个选项的下拉菜单。此菜单显示在模式

jqueryui

对话框中

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

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

$（“#按钮”）。单击（函数（）
{   
var diag=“”
+“选项1”
+“选择2”
+“备选方案3”
+"";
$（诊断）。对话框(
{标题：“选择选项”}，
{autoOpen:“false”}，
{模态：“真”}，
{draggable:“false”}，
{按钮：{OK:dialogOK}}）；
函数dialogOK（）
{
var chosenOption=$（“#诊断下拉选项：选中”）.val（）.toLowerCase（）；
//使用所选选项
$（此）.dialog（“关闭”）；
}); 

---

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

问题是，每次单击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>

//关于DOM ready
$（函数（）{
var下拉列表=
$(' ' +
“选项1”+
“选项2”+
“选项3”+
'');
//创建对话框（仅一次）
下拉对话框({
标题：“选择选项”，
自动打开：错误，
莫代尔：是的，
可拖动：错误，
按钮：{
“OK”：函数（）{
var chosenOption=$（“#诊断下拉选项：选定”）.val（）.toLowerCase（）；
//使用所选选项
$（this.dialog（'close'）；
}
}
});
//绑定单击事件：单击仅打开现有对话框
$（“#按钮”）。单击（函数（）{
$（'诊断下拉列表'）。对话框（'打开'）；
});
});

感谢您的回复。我已经认为它可以这样工作。但是没有办法不创建更多的html元素吗？只使用javascript？这段代码在dom中添加的html元素比您编写的要少，但是如果您的意思是希望使用javascript创建元素，您可以，我编辑了我的答案以反映那个