使用 ajax 从 db 创建选项选择

Posted 2023-03-21

【中文标题】使用 ajax 从 db 创建选项选择

【英文标题】：Creating an option select from db using ajax

【发布时间】：2021-12-08 19:24:51

【问题描述】：

我试图在单击一个按钮时创建一个额外的表单文本字段，这很好，我唯一的问题是选择选项是空白的，当我检查元素时，我看到 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);

现在我的问题是，当我发出警报（数据）时，我得到 [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>

我在这里做错了什么？

【参考方案1】：

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