如何使用javascript在下拉菜单中显示下拉菜单项？

以下是我的html：

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

下面是我的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);

以下是输出：

问题是检测仪出现在位置下拉列表中。我不确定我错在哪里。还可以使用渲染代码

---

编辑：javascript被分离的原因是代码中的其他javascript代码

噢，事情不是这样的。如果HTML字符串没有结束标记，append将自动添加结束标记

因此，在第一次append调用之后，您的html将变成：

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

在这个HTML之后将发生进一步的插入

因此，要这样做：

---

没有使用正确的HTML是错误的。您必须关闭标记，否则浏览器会在需要时为您执行此操作。append首先将HTML转换为节点列表，从而关闭select和div，然后将i附加到滑块。现在，如果您在HTML结构上附加更多选项，那么您就是在关闭的div后面有效地附加THO

您应保留对select的引用，以便随时添加更多选项：

a创建周围的标记：

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

c添加任意多的选项

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

---

谢谢我查看了我的html，注意到结束标记被自动添加。但是，由于中间java脚本使用数据库中的数据，因此需要将它们分开。有没有一种不自动添加结束标记的方法可以自动结束？我理解。我查看了我的html，注意到结束标记被自动添加。但是，由于中间java脚本使用数据库中的数据，因此需要将它们分开。有没有一种方法可以在不自动添加结束标记的情况下进行终止？@ShuyaibAbdullah没有任何方法可以在HTML中禁用结束标记。您对使用HTML有一个错误的概念。请使用适当的DOM方法访问和操作元素。上面给出了一个非常简单的例子。

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

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