我正在try 使用jquery创建一个动态下拉列表
var rooms = $("<select />");
$(res.data).each(function () {
var option = $("<option />");
option.html(this.name);
option.val(this.id);
rooms.append(option);
});
下拉列表是在我直接将其添加到append_parent_div时创建的
$('#append_parent_div').append(rooms);
但当我在上面加上几个div
$('#append_parent_div').append('<div class="col-lg-6 col-md-12 col-12"> <div class="form-group">'+rooms+'</div></div>');
然后在我的html中添加[object Object].
不要使用+，而是,:
例子:
$('#append_parent_div').append('<div class="col-lg-6 col-md-12 col-12"> <div class="form-group">', rooms, '</div></div>');
就像纪录片里说的:https://api.jquery.com/append/
您正在将字符串与对象连接起来
Working 例子:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="append_parent_div">
</div>
<script>
var rooms = $("<select />");
var res = {};
res.data = [{name:"name number 1", id:1},{name:"name number 2", id:2}]
$(res.data).each(function () {
var option = $("<option />");
option.html(this.name);
option.val(this.id);
rooms.append(option);
});
$('#append_parent_div').append('<div class="col-lg-6 col-md-12 col-12"> <div class="form-group">', rooms, '</div></div>');
</script>
</body>
</html>