0

jQueryモーダルダイアログを使用して、ユーザーが選択できるドロップダウンリストを表示しています。ドロップダウンを空のドロップダウンリストに追加することで、ドロップダウンに動的にデータを入力します。これは最初は機能し、2回目はデフォルトのオプションのみを表示し、動的なオプションは表示しませんか？

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

ファイアバグをチェックすると、ボタンがクリックされるたびに新しいダイアログが作成されます。選択リストにはIDがあるため、そのIDで2を作成しました。その後のボタンクリックで、新しいダイアログ（div）が作成され、同じIDを持つ新しい選択リストが作成されます。

IDで選択リストにオプションを追加しているため、新しく作成されたものではなく、最初のオプションが選択されます。ダイアログを一度作成し、1つの選択リストを動的に更新する必要があります。

このフィドルを試してください：http：//jsfiddle.net/scalvert/Hy6ex/2/

于 2012-07-11T20:13:02.233 に答える
1

showExportDialog関数の最初に以下の行を追加します。

$（ "＃selectExport"）。remove（）;

毎回新しいダイアログを作成しています。したがって、常に前のものを削除してください。

于 2012-07-11T20:24:04.100 に答える