JQuery添加选择不起作用

Question

我有这段代码，我在按下添加按钮时添加了一个选择选项。问题是我在选择下拉列表之外获取选项值。一切似乎都很好，但输出很奇怪。大家可以看看吗？

这是要放置内容的div。

<div id="here"></div>

这是添加按钮

<div class="form-group col-auto">
  <button type="button" class="btn btn-success" id="trigger" style="float: left">Add an item</button>
</div>

这是js代码

<script type="text/javascript">
var val = $('#numoforders').val();
$('#trigger').click(function(){
val++;
$("#here").append('<div class="row">');
$("#here").append('<div class="form-group">');
$("#here").append('Select category');
$("#here").append('<select class="form-control" id="category_id['+val+']" name="category_id['+val+']">');
$("#here").append('<option selected>--Select a category--</option>');
@foreach($categories as $category) 
$("#here").append('<option value="{{$category->id}}">{{$category->name}}</option>');
@endforeach
$("#here").append('</select>');
$("#here").append('</div>');
$("#here").append('</div>');        
});
</script>

categories 是从控制器传过来的变量，我用的是 laravel。

如图所示，输出很奇怪。 任何帮助将不胜感激。

Answer 1

当每个开始元素标签被添加到 DOM 时，浏览器试图关闭它，因此，select 标签在添加 options 标签之前被关闭。尝试在一个 append 中将整个标记添加到 DOM。

<script type="text/javascript">
var val = $('#numoforders').val();
$('#trigger').click(function(){
val++;
html = '<div class="row">'
  + '<div class="form-group">'
  + 'Select category'
  + '<select class="form-control" id="category_id['+val+']" name="category_id['+val+']">'
  + '<option selected>--Select a category--</option>'
  + '<option value="{{$category->id}}">{{$category->name}}</option>';

@foreach($categories as $category) 
html += '<option value="{{$category->id}}">{{$category->name}}</option>';
@endforeach

html += '</select></div></div>';

$("#here").append(html);

});
</script>