1. ホーム
  2. javascript

JQueryでドロップダウンリストをクリアする

2023-10-14 08:58:15

質問

私は、サーバーからのデータでドロップダウンリストを埋めるために、この小さな関数を書きました。

function fillDropDown(url, dropdown) {
    $.ajax({
        url: url,
        dataType: "json"
    }).done(function (data) {
        // Clear drop down list
        $(dropdown).find("option").remove(); <<<<<< Issue here
        // Fill drop down list with new data
        $(data).each(function () {
            // Create option
            var $option = $("<option />");
            // Add value and text to option
            $option.attr("value", this.value).text(this.text);
            // Add option to drop down list
            $(dropdown).append($option);
        });
    });
}

そうすると、このように関数を呼び出すことができますね。

fillDropDown("/someurl/getdata", $("#dropdownbox1"))

ドロップダウン・リストから古いデータをクリアしている1行を除いて、すべてが完璧に動作しています。私は何を間違えているのでしょうか?

このコードを改善するのに役立つかもしれないどんなヒントでも、非常に高く評価されます。

どのように解決するのですか?

ただ .empty() :

// snip...
}).done(function (data) {
    // Clear drop down list
    $(dropdown).empty(); // <<<<<< No more issue here
    // Fill drop down list with new data
    $(data).each(function () {
        // snip...


また もありますが、より簡潔な方法として を使ってオプションを構築することもできます。

// snip...
$(data).each(function () {
    $("<option />", {
        val: this.value,
        text: this.text
    }).appendTo(dropdown);
});