Append fails to add option to dynamically loaded option list with optgroup

Question

Appending a single option to a dynamically loaded select fails without any error. This is jQuery code

$("#problem").load("docType.html");
$("#problem").append("<option value='All'>All</option>");

This loads options with option group from the external file successfully but fails to append the 'All' option. No error or warning though !

docType.html contents

<optgroup label="Billing">
<option value="Incorrect Bill" selected="selected">Incorrect Bill</option>
<option value="High Bill">High Bill</option>
</optgroup>
<optgroup label="Other">
<option value="Others">Others</option>
</optgroup>

[`load`](http://api.jquery.com/load/) is asynchronous, so you're appending before the HTML is loaded. — Heretic Monkey, Jan 29 '18 at 17:50
http://api.jquery.com/load/ there is a complete function to `load`. If it stll does not work, check https://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-as-a-js-object-with-jquery — Huangism, Jan 29 '18 at 17:52
Read the documentation. You can provide a complete function. — Heretic Monkey, Jan 29 '18 at 17:52

score 3 · Accepted Answer · edited Jan 30 '18 at 00:24

3

You need to pass a callback because load function makes an async request.

$("#problem").load("docType.html", "", function() {
    $(this).append("<option value='All'>All</option>");
});

Resource

.load()

edited Jan 30 '18 at 00:24

halfer

19,824
17
99
186

answered Jan 29 '18 at 17:53

Ele

33,468
7
37
75

Jirka Vrba · Answer 2 · 2018-01-29T18:03:48.247

3

The load() method has an optional callback parameter.

You can use it here like

$("#problem").load("docType.html",, function (){
    $("#problem").append("<option value='All'>All</option>")
});

What happens is that jQuery starts loading docType.html and appends the All option to #problem. But this append ends before the docType.html loads.

After it loads it overwrites the original content with the All option.

Hope it helps.

edited Jan 29 '18 at 18:03

answered Jan 29 '18 at 17:53

Jirka Vrba

367
2
6

You forgot to put the `,` before function. It works now :) Thanks – Sourav Jan 29 '18 at 18:02

Append fails to add option to dynamically loaded option list with optgroup

2 Answers2

Resource