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

Question

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

下面是输出：

问题是测试人员从位置下拉列表中出来。我不确定我要去哪里错了。你也可以使用http://rendera.herokuapp.com/ 来渲染代码。

编辑：分离 javascript 的原因是因为代码之间有一些其他的 javascript 代码。

Answer 1

您在不使用正确的 HTML 时会出错。您必须关闭标签，否则浏览器会在计算时为您执行此操作。 append 首先将您的 HTML 转换为 NodeList（这导致 select 和 div 被关闭），然后将 i 附加到滑块。现在，如果您在该 HTML 结构上进一步追加 options，您实际上是在封闭的 div 后面追加这些内容。

您应该保留对 select 的引用，以便能够随时添加更多 optino：

a) 创建周围的标记：

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

b) 找到select 并将其存储到变量中：

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

c) 添加任意数量的选项

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

Answer 2

哦，这不是它的工作原理。 .append 将自动添加 closing tags 如果您的 HTML 字符串没有它。

所以在第一次追加调用之后，你的 html 会变成：

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

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

因此，请执行以下操作：

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