使用 ajax 从数据库中创建选项选择

Question

我试图在单击一个按钮时创建一个额外的表单文本字段，这很好，我唯一的问题是选择选项是空白的，当我检查元素时，我看到 NAN 被添加到其中。 这是动态表单元素容器的设计

      <div class="col-sm-6" id="prescription-container">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="drug" class="form-label">Medicine </label>
                                        <select name="drug[]" class="form-control search-select">
                                            <?php echo $drug_drop_down; ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Comment</label>
                                        <div class="phone-icon">
                                            <input type="text" class="form-control" name="diagnosis">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            &nbsp;
                        </div>
                        <div class="col-sm-6">
                            <a href="#" id="add_prescription" class="btn btn-warning"><i class="fa fa-plus"></i>Add
                                prescription</a>
                        </div>
                    </div>

这就是我为添加处方按钮实现 onclick 侦听器的方式

       <script>
    $("#add_prescription").click(function(e) {
        e.preventDefault();
        var result="<option value=''>Select Drug<option>";
        $.ajax({
            type: 'GET',
            url: 'drugs',
            success: function(data) {
                if (data.length > 0) {
                    $.each(data, function(i, item) {
                        result += "<option value='" + data.id + "'>"+data.name+"<option>";
                    })
                } else{
                    result += "<option value='" + data.id + "'>"+data.name+"<option>";
                }
                $('#prescription-container').append(" <div class='row'> <div class='col-md-6'>" +
                    "<div class='form-group'>" +
                    "<label for='drug' class='form-label'>Medicine </label><select name='drug[]'' class='form-control'>" +
                    + result +
                    "</select>" +
                    "</div>" +
                    "</div>" +
                    "<div class='col-sm-6'>" +
                    "<div class='form-group'>" +
                    "<label>Comment</label>" +
                    "<div class='phone-icon'>" +
                    "<input type='text' class='form-control' name='diagnosis'>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>")
            }
        })
    })
</script>

最后这是控制器发回数据

       function () {
    $drugs = Medicine::get();
    return response()->json( $drugs);
}

现在我的问题是，当我 alert(data) 时，我得到 [object Object],[object Object]。 这让我修改控制器如下

       function () {
    $drugs = Medicine::get();
    $drug_drop_down = "<option>Select drug</option>";
    foreach($drugs as $drug){
        $drug_drop_down .="<option value='".$drug->id."'>$drug->name</option>";
    }
    return response()->json( $drug_drop_down);
}

和 onclick 侦听器

      <script>
    $("#add_prescription").click(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'GET',
            url: 'drugs',
            success: function(data) {
                $('#prescription-container').append(" <div class='row'> <div class='col-md-6'>" +
                    "<div class='form-group'>" +
                    "<label for='drug' class='form-label'>Medicine </label><select name='drug[]'' class='form-control'>" +
                    + data +
                    "</select>" +
                    "</div>" +
                    "</div>" +
                    "<div class='col-sm-6'>" +
                    "<div class='form-group'>" +
                    "<label>Comment</label>" +
                    "<div class='phone-icon'>" +
                    "<input type='text' class='form-control' name='diagnosis'>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>")
            }
        })
    })
</script>

现在，如果我alert(data)我得到<option>Select drug</option><option value='1'>Quinine</option><option value='2'>Malariaquine</option>但选择仍在添加没有选项，以下内容出现在添加的文件的检查元素上

      <div class="row"> 
        <div class="col-md-6">
          <div class="form-group">
            <label for="drug" class="form-label">Medicine </label>
              <select name="drug[]" '="" class="form-control">NaN</select>
           </div>
         </div>
        </div>

我在这里做错了什么？

Answer 1

经过一番搜索才意识到第二种方法应该可以工作，除了这个+ + data + "</select>" +表示我使用 + 作为加法运算符而不是连接器，将其更改为+ data + "</select>" +解决了我的问题。 我仍然不明白第一种方法可能会出现什么问题