CODEWITHSUNDEEP
javascriptjquerydom
user2592038
user2592038

Reputation: 375

jQuery append() empty elements

I want to retrieve json data and append to an <option> tag in HTML. But each time it also appends an empty right after the specific elements. It looks like this. 

<select>
<option value="All">All</option>
<option></option>
<option value="condition1">condition</option>
<option></option>
<option value="condition2">condition2</option>
<option></option>
</select>

Obviously it's suppose to append like below: 

<select>
<option value="All">All</option>
<option value="condition1">condition</option>
<option value="condition2">condition2</option>
</select>

Here is the jQuery code:

for(var i=0; i<=option_array.length; i++){
          if(option_array.indexOf(condition)==-1){
          option_array.push(condition);

      $select.append('<option value="' + condition + '">' + condition + '<option>');
                  console.log("CONDITION!" + condition);
                  option_array.push(condition);

                 }

Here is the original HTML:

<select></select>

Any ideas of why this happen?

Upvotes: 0

Views: 761

Answers (1)

epascarello
epascarello

Reputation: 207501

Reason you are getting extra elements is you have another opening tag

+ '<option>');
   ^^^

You missed the /

+ '</option>');
   ^^^

Upvotes: 3

Related Questions