You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Laravel框架中如何获取下拉框选中的文本内容并插入数据库

avatar
数据老陈
2026-10-1

问题说明

使用Laravel开发项目时，需要将下拉框选中的采购商名称存入数据库订单表，已完成采购商表数据写入、控制器逻辑、Blade视图和前端custom.js脚本编写，无法正确获取下拉框选中的文本值存入数据库。

现有代码

控制器代码 

function GetBuyerList(){
        $buyerList=BuyerModel::all();//get data from table
//        $buyerList=BuyerModel::lists('buyer_name','id');
        //return $buyer_name;
        return view('order',compact('buyerList'));//send data to view
    }
function CreateOrder(Request $request){

    $user_id= $request->input('user_id');
    $buyer_name= $request->input('buyer_name');
    $style_name= $request->input('style_name');
    $season= $request->input('season');
    $brand_name= $request->input('brand_name');
    $garmments_type= $request->input('garmments_type');
    $order_quantity= $request->input('order_quantity');
    $fob= $request->input('fob');
    $total_fob= $request->input('total_fob');
    $merchandiser_name= $request->input('merchandiser_name');
    $order_no= $request->input('order_no');
    $order_date= $request->input('order_date');
    $status= $request->input('status');
    $input_date= $request->input('input_date');
    $note= $request->input('note');
    $result=OrderModel::insert([
        'user_id'=>$user_id,
        'buyer_name'=>$buyer_name,
        'style_name'=>$style_name,
        'season'=>$season,
        'brand_name'=>$brand_name,
        'garmments_type'=>$garmments_type,
        'order_quantity'=>$order_quantity,
        'fob'=>$fob,
        'total_fob'=>$total_fob,
        'merchandiser_name'=>$merchandiser_name,
        'order_no'=>$order_no,
        'order_date'=>$order_date,
        'status'=>$status,
        'input_date'=>$input_date,
        'note'=>$note,
    ]);


    return view('order');

}

Blade视图代码 

@extends('Layout.app')
@section('content')
   <br><br><br><br>
<div  class="orderDiv container  col-8">
        <div class="d-flex justify-content-center align-items-center my-10 ">
            <div class="card full-width">
                <div class="card-header">
                    <h3>Orders</h3>
                </div>
                <div class="card-body">
                    <form>
                        <div class="row">
                            <div class="col-md-2">
                                <label for="category" class=" control-label">Buyer Name</label>
                            </div>
                            <div class="col-md-4">
                                <select class="buyerselect form-control full-width" id="buyerSelectId" name="buyer" required="">
                                    <option value="0" disabled="true" selected="true">-Select Buyer-</option>
                                    @foreach($buyerList as $buyer)
                                        <option value="{{$buyer->id}}">{{$buyer->buyer_name}}</option>
                                    @endforeach
{{--                                    <option selected value="">Select Buyer</option>--}}
{{--                                    <option value='564'>564</option>--}}

                                </select>
{{--                                {!! Form::select('id',$buyerList,null,['class'=>'form-control']) !!}--}}

                            </div>
                            <div class="col-md-4">
                                <button id="buyerModalBtnId" type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#addBuyerModal"><i class="fas fa-plus"></i>
                                    Add New Buyer
                                </button>
                            </div>
                        </div>
                        <div class="row py-3">
                            <div class="col-md-2">
                                <label for="category" class=" control-label">Style#</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" id="typeText" class="form-control" />
                            </div>
                        </div>
                        <div class="row py-3">
                            <div class="col-md-2">
                                <label for="category" class=" control-label">Season</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" id="typeText" class="form-control" />
                            </div>
                        </div>
                        <div class="row py-3">
                            <div class="col-md-2">
                                <label for="category" class=" control-label">Brand</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" id="typeText" class="form-control" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label for="category" class=" control-label">Garments Type</label>
                            </div>
                            <div class="col-md-4">
                                <select class="form-control select2" name="garmentstype" style="width: 75%;" required="">
                                    <option selected value="">Select Garments</option>
                                    <option value='Baby Jacket'>Baby Jacket</option>

                                </select>
                            </div>
                            <div class="col-md-4">
                                <button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal2"><i class="fas fa-plus"></i>
                                    Add Germants Type
                                </button>
                            </div>
                        </div>
                        <div class="row py-3">
                            <div class="col-md-2">
                                <label for="category" class=" control-label">Company Name</label>
                            </div>
                            <div class="col-md-4">
                                <select class="form-control full-width" name="buyer" required="">
                                    <option selected value="">Select Company</option>
                                    <option value='564'>Friend's Knittings</option>
                                    <option value='Benetton'>Debonair Ltd</option>
                                    <option value='HM'>Orbitex Knitting</option>
                                    <option value='CA'>DPQSL</option>
                                </select>
                            </div>
                            <div class="row py-3">
                                <div class="col-md-2">
                                    <label for="category" class=" control-label">Order Qty</label>
                                </div>
                                <div class="col-md-8">
                                    <input type="text" id="typeText" class="form-control" />
                                </div>
                            </div>
                            <div class="row py-3">
                                <div class="col-md-2">
                                    <label for="category" class=" control-label">FOB</label>
                                </div>
                                <div class="col-md-8">
                                    <input type="text" id="typeText" class="form-control" />
                                </div>
                            </div>
                            <div class="row py-3">
                                <div class="col-md-2">
                                    <label for="category" class=" control-label">Concern Merchandiser</label>
                                </div>
                                <div class="col-md-8">
                                    <input type="text" id="typeText" class="form-control" />
                                </div>
                            </div>
                            <div class="row py-2">
                                <div class="col-md-2">
                                    <label for="category" class=" control-label">orderDate</label>
                                </div>
                                <div class="col-md-8">
                                    <input type="text" id="typeText" class="form-control" />
                                </div>
                            </div>
                            <div class="row py-3">
                                <div class="col-md-2">
                                    <label for="category" class=" control-label">OrderNo</label>
                                </div>
                                <div class="col-md-8">
                                    <input type="text" id="typeText" class="form-control" />
                                </div>
                            </div>
                            <div class="row py-3">
                                <div class="col-md-12">
                                    <center>
                                        <button type="submit" class="btn btn-success">Submit</button>
                                    </center>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- modal 1 -->
  <div class="modal fade" id="addBuyerModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Buyer</h5>
                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                </div>
                <form>
                <div class="modal-body">
                    <div id="addBuyerInformationId" class="form-group">
                    <label for="tstock" class="col-sm-2 control-label">Buyer Name</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="addBuyerNameId" name="garmentstype" placeholder="Input Buyer Name">
                    </div><br>
                        <label for="tstock" class="col-sm-2 control-label">Buyer Country</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="addBuyerCountryId" name="garmentstype" placeholder="Input Buyer Country">
                        </div>
                    <br>
                    </div><br>

                    <br>
                    <label for="tstock" class="col-sm-2 control-label">User Id</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="addBuyerUserId" name="garmentstype" placeholder="Input User Id">
                    </div>
                    <br>
                  </div>

                <div class="modal-footer">
                    <button  type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
                        Close
                    </button>
                    <button id="buyerAddConfirmButton" type="button" class="btn btn-primary" >Save changes</button>
                </div>




    <!-- modal2 -->
    <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Create Garments Type</h5>
                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                </div>
                <form>
                <div class="modal-body">
                    <div class="form-group">
                    <label for="tstock" class="col-sm-2 control-label">Select</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="garmentstype" name="garmentstype" placeholder="Garments Type">
                    </div>
                    <br>
                  </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>



    <!-- End your project here-->

@endsection

custom.js代码 

$(document).ready(function () {
$('#VisitorDt').DataTable();
$('.dataTables_length').addClass('bs-select');
});

$('#buyerModalBtnId').click(function() {

    $('#addBuyerModal').modal('show');
});
$('#buyerAddConfirmButton').click(function() {
    // var id=$(this).data('id');

    var name = $('#addBuyerNameId').val();
    var country = $('#addBuyerCountryId').val();
    var user=$('#addBuyerUserId').val();

    BuyerAdd(name, country,user);

});

function BuyerAdd(buyerName, buyerCountry,buyerUserId) {

    if (buyerName.length == 0) {
        toastr.error('Buyer Name is Empty !');

    } else if (buyerCountry.length == 0) {
        toastr.error('Buyer Description is Empty !');

    }
    else if (buyerUserId.length == 0) {
        toastr.error('Buyer User Id is Empty !');

    }
    else {
        $('#buyerAddConfirmButton').html("<div class='spinner-border spinner-border-sm' role='status'></div>"); ///Animation Set
        axios.post('/BuyerAdd', {

            name: buyerName,
            country: buyerCountry,
            user_id:buyerUserId,

        })
            .then(function(response) {
                $('#buyerAddConfirmButton').html("Add");
                if (response.status == 200) {
                    if (response.data == 1) {
                        // alert('Success');
                        $('#addBuyerModal').modal('hide');
                        toastr.success('Add Successfull');
                        $('#buyerAddConfirmButton').addClass('data-mdb-dismiss');


                        //getServicesData();
                    } else {
                        // alert('Failed');
                        $('#addBuyerModal').modal('hide');
                        toastr.error('Add Failed !!');
                        //getServicesData();
                    }
                } else {
                    $('#addBuyerModal').modal('hide');
                    toastr.error('Something Went Wrong');

                }


            })

            .catch(function(error) {
                $('#addBuyerModal').modal('hide');
                toastr.error('Something Went Wrong');


            });
    }

}

解决方法

步骤1：修复Blade表单问题

  1. 给表单添加提交地址、提交方式和CSRF验证，修改form标签为：
<form action="{{ url('/create-order') }}" method="POST">
@csrf
  1. 采购商下拉框的name属性改为buyer_id，和传值内容匹配：
<select class="buyerselect form-control full-width" id="buyerSelectId" name="buyer_id" required="">
  1. 所有输入框补全name属性，和控制器$request->input的参数名一一对应，比如款号输入框改为：
<input type="text" name="style_name" class="form-control" />
  1. 修正重复的name属性：第二个公司选择下拉框的name不能也是buyer，改为company_name，避免参数覆盖。

步骤2：修改控制器逻辑

拿到采购商ID后直接查询采购商表获取名称，数据更安全可靠，避免前端篡改：

function CreateOrder(Request $request){
    // 校验采购商ID合法性
    $buyer = BuyerModel::findOrFail($request->input('buyer_id'));
    $buyer_name = $buyer->buyer_name;

    $user_id= $request->input('user_id');
    $style_name= $request->input('style_name');
    // 其余参数保持不变
    // ... 原有插入逻辑不变
    
    return redirect()->back()->with('success','订单创建成功');
}

可选方案：前端直接传采购商名称

如果不需要校验采购商合法性，也可以前端直接传选中的文本：

  1. 在Blade表单里加隐藏输入框：
<input type="hidden" name="buyer_name" id="buyer_name_input">
  1. 在custom.js里添加下拉框变化监听事件：
$(document).ready(function(){
    // 原有代码不变
    $('#buyerSelectId').change(function(){
        let selectedName = $(this).find('option:selected').text();
        $('#buyer_name_input').val(selectedName);
    });
});

控制器无需修改，直接取$request->input('buyer_name')即可。

内容的提问来源于stack exchange，提问作者Md. Tazimul Islam Raj

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.10.01 21:15:01