CODEWITHSUNDEEP
javascriptjquery
Aetherix
Aetherix

Reputation: 2260

Clear dropdownlist with JQuery

I wrote this little function to fill a drop down list with data from the server.

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);
        });
    });
}

I can then call the function in this way:

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

Everything is working perfectly, except for the one line where I'm clearing old data from the drop down list. What am I doing wrong?

Any tips that might help to improve this code are also highly appreciated.

Upvotes: 77

Views: 238412

Answers (4)

Gurung
Gurung

Reputation: 163

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

Upvotes: 2

Robert
Robert

Reputation: 1907

How about storing the new options in a variable, and then using .html(variable) to replace the data in the container?

Upvotes: 0

शेखर
शेखर

Reputation: 17604

I tried both .empty() as well as .remove() for my dropdown and both were slow. Since I had almost 4,000 options there.

I used .html("") which is much faster in my condition.
Which is below

  $(dropdown).html("");

Upvotes: 22

Matt Ball
Matt Ball

Reputation: 360056

Just use .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...

There's also a more concise way to build up the options:

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

Upvotes: 219

Related Questions