Question

我正在使用jQuery模式对话框显示一个下拉列表供用户选择。我通过将它们附加到空下拉列表来动态填充下拉列表。这是第一次工作，然后第二次通过它只显示默认选项，而不是动态选项？

function showExportDialog() {
    //create html string for drop down list
    var selectString = "<div><select id=\"selectExport\" style=\"width: 100%\"><option>-- Select Export --</option></select></div>";

    //initialize the dialog - register click handler
    var $dialog = $(selectString).dialog({
        autoOpen: false,
        title: 'Export Dialog',
        modal: true,
        //dims screen to bring dialog to the front
        width: 500,
        buttons: {
            "export": function() {
                exportAs($('#selectExport').val());
                $(this).dialog('close');
            }
        }
    });

    //dynamically generate drop down list based on model type
    switch (modelType) {
    case "SPATIAL_STATISTICAL":
        $('#selectExport').html(''); //clear the drop down list
        $("<option value='csv'>CSV (comma separated value)</option>").appendTo("#selectExport");
        $("<option value='tab'>TSV (tab separated value)</option>").appendTo("#selectExport");
        $("<option value='heat'>Heatmap (google heatmap layer format)</option>").appendTo("#selectExport");
        break;
    case "STATISTICAL":
        break;
    case "GRAPH":
        break;
    case "PATTERN":
        break;
    default:
        throw "Invalid ModelType '" + modelType + "'";
    }

    //open the dialog
    $dialog.dialog('open');
}

这是一个显示我的问题的小提琴： http://jsfiddle.net/b3v3R/21/

要重新创建问题：

点击“显示导出下拉列表”
从下拉列表中选择一个选项
点击“导出”
再次点击“显示导出下拉列表”

有什么想法？

Answer 1

如果您检查firebug，则每次单击该按钮时都会创建一个新对话框。由于您的选择列表具有ID，因此您现在已使用该ID创建了2。在后续按钮单击时，将创建一个新对话框（div），以及一个新的选择列表具有相同ID 。

因为您要按ID向选择列表添加选项，所以它会选择第一个选项，而不是新创建的选项。您应该创建一次对话框，并动态更新一个选择列表。

试试这个小提琴：http://jsfiddle.net/scalvert/Hy6ex/2/

Answer 2

在showExportDialog函数中首先添加以下行。

$（ “＃selectExport”）除去（）;

您每次都在创建新对话框。所以永远删除前一个。

jQuery Dialog下拉列表第二次不出现

2 个答案: