使用 jquery 的動態下拉菜單

Question

我正在嘗試使用 jquery 創建動態下拉列表

   var rooms = $("<select />");

   $(res.data).each(function () {
         var option = $("<option />");
         option.html(this.name);
         option.val(this.id);
         rooms.append(option);
   });

當我直接 append 到append_parent_div時創建下拉列表

$('#append_parent_div').append(rooms);

但是當我 append 它與幾個 div 的

  $('#append_parent_div').append('<div class="col-lg-6 col-md-12 col-12"> <div class="form-group">'+rooms+'</div></div>');

然后[object Object]被附加到我的 html 中。

Answer 1

不要使用+ ，但是, ：

例子：

$('#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/

您正在將字符串與 object 連接起來

工作示例：

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

使用 jquery 的動態下拉菜單

問題描述

1 個解決方案

解決方案1
1 已采納 2022-03-24 12:22:20

使用 jquery 的動態下拉菜單

問題描述

1 個解決方案

解決方案1 1 已采納 2022-03-24 12:22:20

解決方案1
1 已采納 2022-03-24 12:22:20