Очистити випадаючий список за допомогою JQuery


75

Я написав цю маленьку функцію для заповнення випадаючого списку даними із сервера.

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"))

Все працює ідеально, за винятком одного рядка, де я очищаю старі дані зі спадного списку. Що я роблю не так?

Будь-які поради, які можуть допомогти покращити цей код, також дуже вдячні.

Відповіді:


202

Просто використовуйте .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);
});

1
До речі, це дуже добре працювало б як плагін jQuery з невеликою кількістю рефакторингу.
Matt Ball

1
для мене дані були не списком DOM, а масивом javascript, тому замість цього $(data).each(function () ...->$.each(data, function()..
AaronLS

Мені довелося писати з великої літери ValueіText
Рафаель

21

Я спробував обидва .empty(), а також .remove()для мого випадаючого списку, і обидва були повільними. Оскільки я мав там майже 4000 варіантів.

Я використовував, .html("")що набагато швидше в моєму стані.
Що нижче

  $(dropdown).html("");

11
4000 варіантів, мабуть, занадто багато для користувальницької веб-сторінки. У багатьох браузерах виникають проблеми, навіть при отриманні цього. Розгляньте список сторінок або автозаповнення / пропозицію.
StingyJack

2
<select id="ddlvalue" name="ddlvaluename">
<option value='0' disabled selected>Select Value</option>
<option value='1' >Value 1</option>
<option value='2' >Value 2</option>
</select>

<input type="submit" id="btn_submit" value="click me"/>



<script>
$('#btn_submit').on('click',function(){
      $('#ddlvalue').val(0);
});
</script>

0

Як щодо збереження нового optionsв a variable, а потім використання .html(variable)для заміни даних у container?

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.