0

我正在使用一个 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/

要重现问题：

  1. 单击“显示导出下拉菜单”
  2. 从下拉列表中选择一个选项
  3. 点击“导出”
  4. 再次单击“显示导出下拉菜单”

有什么想法吗？

4

2 回答 2

2

如果您检查 firebug，则每次单击按钮时都会创建一个新对话框。因为您的选择列表有一个 ID，所以您现在使用该 ID 创建了 2。在随后的按钮单击中，将创建一个新对话框 (div)，并创建一个具有相同 ID的新选择列表。

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

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

于 2012-07-11T20:13:02.233 回答
1

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

$("#selectExport").remove();

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

于 2012-07-11T20:24:04.100 回答