使用 AJAX 从数据库动态创建 Option Select-php教程-PHP中文网

使用 AJAX 从数据库动态创建 Option Select

碧海醫心

发布： 2025-07-17 16:24:04

原创

783人浏览过

使用 ajax 从数据库动态创建 option select

本文将详细介绍在使用 AJAX 从数据库动态生成 <select> 选项时，遇到的 NaN 显示问题。通过详细的代码示例，我们将探讨如何正确地从后端获取数据，并在前端动态地构建和添加 <option> 元素，从而避免 NaN 错误的出现，并确保下拉选择框能够正确显示数据库中的数据。

在动态表单开发中，经常需要通过 AJAX 从后端获取数据，然后动态地创建表单元素，例如 <select> 下拉选择框。如果处理不当，可能会遇到 NaN (Not a Number) 显示在 <select> 元素中的问题。本文将通过一个实际的案例，详细讲解如何避免这个问题，并正确地实现动态生成 option select 的功能。

问题分析

问题的核心在于，当使用 JavaScript 将从 AJAX 请求返回的数据动态添加到 HTML 元素时，如果数据类型不匹配或拼接方式不正确，JavaScript 可能会尝试将字符串转换为数字，从而导致 NaN 的出现。

解决方案

以下是一个完整的解决方案，包括后端代码和前端代码，以及详细的解释。

1. 后端代码 (PHP - Laravel 示例)

<?php

namespace App\Http\Controllers;

use App\Models\Medicine;
use Illuminate\Http\JsonResponse;

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

登录后复制

解释：

这段 PHP 代码从 Medicine 模型中获取所有药品数据。
它构建一个包含所有 <option> 元素的字符串，并将其作为 JSON 响应返回。
确保返回的 JSON 数据是包含完整 <option> 标签的字符串，而不是对象数组。

2. 前端代码 (JavaScript - jQuery 示例)

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

查看详情

$(document).ready(function() {
    $("#add_prescription").click(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'GET',
            url: 'drugs', // 替换为你的 API 接口
            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 + // 直接将包含 option 的字符串插入到 select 标签中
                    "</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>"
                );
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error("AJAX request failed:", textStatus, errorThrown);
            }
        });
    });
});

登录后复制

解释：

使用 jQuery 的 $.ajax 方法向后端请求数据。
在 success 回调函数中，直接将后端返回的包含 <option> 元素的字符串插入到动态创建的 <select> 元素中。
关键在于，不要尝试对 data 进行任何算术运算或字符串拼接，直接将其作为 HTML 字符串插入。
添加了 error 回调函数，用于处理 AJAX 请求失败的情况，方便调试。

3. 避免 NaN 的关键

后端返回 HTML 字符串： 后端直接生成包含所有 <option> 元素的 HTML 字符串，而不是返回一个对象数组。
前端直接插入 HTML： 前端直接将后端返回的 HTML 字符串插入到 <select> 元素中，避免任何可能导致类型转换的运算。
正确使用字符串拼接： 确保在拼接 HTML 字符串时，使用字符串拼接运算符 +，而不是算术运算符。

完整示例

假设 Medicine 模型包含 id 和 name 两个字段，并且数据库中存在以下数据：

id	name
1	Quinine
2	Malariaquine

当点击 "Add prescription" 按钮时，将会动态生成以下 HTML 代码：

<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'>
                <option value=''>Select drug</option>
                <option value='1'>Quinine</option>
                <option value='2'>Malariaquine</option>
            </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>

登录后复制