使用 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>" +解決了我的問題。 我仍然不明白第一種方法可能會出現什么問題