javascript - 单击jquery中的按钮后如何添加新的选择框

Question

我不知道是否可以使用jquery，..我有一个选择选项，其中包含来自数据库的数据数组，我想要的是，每当我单击按钮时，另一个选择选项就会像第一个选择选项一样弹出..这是我选择选项的代码

       <select class="form-control" name="room[]" id="room[]">
        <option value="" default>Select</option>
        <?php
        $room = $subjectsClass->room();
        foreach ($room as $key => $value) {
        echo '<option value=" ' . $value['room_id'] .' ">' . $value['room_no'] . '</option>';
        }
        ?>
        </select>
    <button type="button" class="btn btn-default" id="addRooms" >Add more Rooms?</button>
<script>

$('#addRooms').click(function(){
  //append another select box with data from database,..how??
});

</script>

Answer 1

假设您将其包装到一个 div 中，例如:

<div id="the_div_of_wrapping"> all your stuff </div>

那么我会这样做:

var the_select = $("#room[]");
var the_id = the_select.prop("id");
var the_number_of_selects = $("select").length;
var the_div_of_wrapping = $("#the_div_of_wrapping");

the_select.clone().prop("id", the_id + the_number_of_selects);
the_div_of_wrapping.append(the_select);

.

更新:

正如评论中所讨论的，我会删除 id，因为它是不必要的，然后代码将是:

var the_select = $("#room[]");
var the_div_of_wrapping = $("#the_div_of_wrapping");

the_select.clone();
the_div_of_wrapping.append(the_select);