How to display dropdown menu items inside the dropdown using javascript?

Question

Below is my html:

 <div class="row">
    <div class="col-lg-11">
         <ul  class="list-unstyled" id="slider">
         </ul>
    </div>                        
 </div>

Below is my javascript:

var locationbegin="<div class='form-group'><label>Location</label><select  
class='form-control' id='location'><option>test</option>";
$("#slider").append(locationbegin); 

var locationoptions = "<option>tester</option>";
$("#slider").append(locationoptions);

var locationend="</select> </div>";
$("#slider").append(locationend);

Below is the output:

The problem is the tester comes out of the location dropdown. I'm not sure where i'm going wrong. You can also use http://rendera.herokuapp.com/ to render the code.

Edit: The reason the javascript is separated is because of some other javascript code in between in the code.

feeela · Accepted Answer · 2018-03-08 09:35:38Z

1

You are going wrong in not using proper HTML. You have to close the tags or the browser does this for you whenever it computes it should. append first turns your HTML into NodeList (which results in the select and div being closed) and afterwards i is appended to the slider. Now, if you append further options onto that HTML structure, you are ffectivly appending thos behind the closed div.

You should keep a reference to the select to be able to add more optinos whenever you like:

a) create the surrounding markup:

var myFormField = $('<div class="form-group"><label>Location</label><select class="form-control" id="location"><option>test</option></select></div>')

b) find the select and store it to a variable:

var mySelect = myFormField.find('#location');

c) add as many options as you like

mySelect.append('<option>Value 2</option>');
mySelect.append('<option>Value 3</option>');
mySelect.append('<option>Value 4</option>');

edited Mar 8, 2018 at 9:35

answered Mar 8, 2018 at 9:03

feeela

30k7 gold badges61 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shuyaib Abdullah Over a year ago

I understand that. I reviewed my html and noticed the closing tags were automatically added. However i need them separate due to a loop for the middle java script as it uses data from the database. Is there a way to apend without automatically adding the closing tags ?

feeela Over a year ago

@ShuyaibAbdullah No there is no way of disabling closing tags in HTML. You got a wrong concept of working with HTML. Please use the the proper DOM methods to acces and manipulate elements. One very simplistic example is given above.

void · Accepted Answer · 2018-03-08 09:02:36Z

0

Oh this is not how it works. .append will automatically add closing tags if your HTML strings doesnt have it.

So just after the first append call, your html will become:

<div class='form-group'>
    <label>Location</label>
    <select class='form-control' id='location'>
      <option>test</option>
    </select>
</div>

And further insertions will happen after this HTML.

So instead, do this:

var locationbegin="<div class='form-group'><label>Location</label><select  
class='form-control' id='location'><option>test</option>";
var locationoptions = "<option>tester</option>";
var locationend="</select> </div>";

$("#slider").append(locationbegin + locationoptions + locationend);

answered Mar 8, 2018 at 9:02

void

36.8k10 gold badges72 silver badges111 bronze badges

1 Comment

Shuyaib Abdullah Over a year ago

Thanks. I reviewed my html and noticed the closing tags were automatically added. However i need them separate due to a loop for the middle java script as it uses data from the database. Is there a way to apend without automatically adding the closing tags ?

Collectives™ on Stack Overflow

How to display dropdown menu items inside the dropdown using javascript?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related