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.

Answer 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>');

Answer 2

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