Выпадающий список jQuery Dialog не появляется во второй раз

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/

Чтобы воссоздать эту проблему:

1. Нажмите кнопку «Показать Экспорт выпадающей»
2. Выберите опцию из выпадающего списка
3. Нажмите 'Экспорт'
4. Нажмите 'Показать экспорт Dro p Down 'снова

Любые мысли?

Answer 1

Если вы отметите firebug, вы создаете новое диалоговое окно каждый раз, когда нажимается кнопка. Поскольку ваш список выбора имеет идентификатор, вы создали 2 с этим идентификатором. При последующих нажатиях кнопки создается новый диалог (div) и новый список выбора С ИДЕМ ИДОМ.

Поскольку вы добавляете параметры в список выбора по идентификатору, он выбирает первый, а не тот, который был недавно создан. Вы должны создать свое диалоговое окно один раз и динамически обновлять один единственный список.

Попробуйте эту скрипку: http://jsfiddle.net/scalvert/Hy6ex/2/

Answer 2

добавить ниже линии на очень первой в функции showExportDialog.

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

Вы создаете новый диалог каждый раз. поэтому всегда удаляйте предыдущий.