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>

类别是从控制器传递的变量，我使用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>