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.
This question is related to
javascript
jquery
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);
});
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("");
How about storing the new options in a variable, and then using .html(variable) to replace the data in the container?
<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>
Source: Stackoverflow.com