如何使用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关闭），然后我将附加到滑块。现在，如果您将更多options附加到该HTML结构上，那么您可以在封闭的div后面添加select。

您应该保留对var myFormField = $('<div class="form-group"><label>Location</label><select class="form-control" id="location"><option>test</option></select></div>') 的引用，以便能够随时添加更多optinos：

a）创建周围的标记：

select

b）找到var mySelect = myFormField.find('#location'); 并将其存储到变量：

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

c）添加任意数量的选项

["[0288144111, Please check File Values:==>For input string: "N/A", 20180201]","[4403244111, Upload Not Received, 20180201]","[4246244111, Upload Not Received, 20180201]","[7097244111, Upload Not Received, 20180201]","[9917244111, Upload Not Received, 20180201]"]

Answer 2

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

所以在第一次追加调用之后，你的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);