Question

我在使用Laravel和jQuery或JavaScript进行基于组合选择的自动填充文本字段中遇到了困难。我已经搜寻了几天都没有。

ContractController.php

 public function create()
 {
    $order = Order::all();
    return view('contract.create', compact('order'));
}

create.blade.php

<select name="cde_order" id="cde_order" class="form-control" required>
    <option disabled selected> -- PICK -- </option>
    @foreach($order as $order)
    <option value="{{ $order->cde_order }}" data-price="{{ $order->addr_customer }}">{{ $order->nme_customer }}</option>
    @endforeach
</select>

<input type="text" name="addr_contract" id="addr_contract" class="form-control">

web.php

Route::resource('contract','ContractController');

这是我的订单模型：

模型订单

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Order extends Model
{
    protected $table = 'tbl_order';
    protected $primaryKey = 'cde_order';

    protected $fillable = [
        'nme_customer', 'add_customer', 'phone_customer', 'msg_order'
    ];

    public function contract()
    {
        return $this->hasMany('App\Contract');
    }
}

这是针对合同模型的： 示范合同

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;


class Contract extends Model
{
    protected $table = 'tbl_contract';
    protected $primaryKey = 'cde_contract';

    protected $fillable = [
        'cde_order', 'add_customer'
    ];


    public function order()
    {
        return $this->belongsTo('App\Order');
    }
}

这是订单表的迁移文件 订单迁移

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTableOrder extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tbl_order', function (Blueprint $table) {
            $table->increments('cde_pesan');
            $table->string('nme_customer');
            $table->string('add_customer');
            $table->string('phone_customer');
            $table->integer('msg_order');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('tbl_order');
    }
}

这是合同表的迁移文件 合同迁移

<?php

  use Illuminate\Support\Facades\Schema;
  use Illuminate\Database\Schema\Blueprint;
  use Illuminate\Database\Migrations\Migration;

class CreateTableContract extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tbl_contract', function (Blueprint $table) {
            $table->increments('cde_contract');
            $table->integer('cde_order')->unsigned();

            $table->string('add_contract');
            $table->string('phone_customer');
            $table->timestamps();

            $table->foreign('cde_order')->references('cde_order')->on('tbl_order')
                ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('tbl_contract');
    }
}

Answer 1

您可以处理change()事件并设置as的地址为data-attribute并开始change（）事件

<select name="cde_order" id="cde_order" class="form-control" required>
    <option disabled selected> -- PICK -- </option>
    @foreach($order as $order)
        <option value="{{ $order->cde_order }}" data-address="{{ $order->add_customer }}">{{ $order->nme_customer }}</option>
    @endforeach
</select>

<script>
$('#cde_order').change(function(){
    var addr = $(this).find('option:selected').data('address');
    $('#addr_contract').val(addr);
});
</script>

Answer 2

<select data-route="{{route('contract.show')}}" name="cde_order" id="cde_order" class="form-control" required>
    <option disabled selected> -- PICK -- </option>
    @foreach($order as $order)
    <option value="{{ $order->cde_order }}" data-price="{{ $order->addr_customer }}">{{ $order->nme_customer }}</option>
    @endforeach
</select>

在ajax中

$('#cde_order').change(function(e){
e.preventDefault();

   $.ajaxSetup({
             headers: {
                 'X-CSRF-TOKEN': token
             }
         });
         //e.preventDefault();
         var route  = $(this).attr('data-route');  
         var id     = $(this).val();        
         $.ajax({
             type:'post',
             url :route,
             dateType:'json',
             data:{id:id},
             success: function (data){
                 if (data.status==true){
                       $('#addr_contract').text(data.objctData.name) 
//objctData is the object you want take property from it
                     });
                 }else{

                 }
             },error:function(){
                 alert('error,try again');
             }
         });

})

在您的控制器中

public function show(Request $request){
$id =$request->id;
// here get data from your model and return
return response()->json(['objctData'=>$objctData])
}

基于laravel jquery javascript中的组合选择自动填充文本字段

2 个答案: