用户从下拉列表中单击选项后如何显示数据？

Question

我想在用户选择项目后显示数据。

我尝试了几种方法，但没有一种能显示下一个数据。我想创建就像用户选择项目时一样简单，它会显示下一个问题，如选择产品，选择期间等。

这是我的form.blade.php

@extends('layouts.master')

@section('style')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheer" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    .box{
        width:600px;
        margin:0 auto;
        border:1[x solid #ccc;]
    }
</style>

@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Add Prospect</div>
                <form action="{{ url('/add/outlet') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <div class="form-group">
                        <select name="project_name" id="project" class="form-control input-lg dynamic" data-dependent="product">
                            <option value="">Select Project</option>
                            @foreach($project_list as $project)
                                <option value="{{$project->project}}"> {{$project->project}} </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <select name="product_name" id="product" class="form-control input-lg">
                            <option value="">Select Product</option>
                            <option value="HelloBill Retail">HelloBill Retail</option>
                            <option value="HelloBill FNB">HelloBill FNB</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <select name="period" id="period" class="form-control input-lg">
                            <option value="">Select Period</option>
                            <option value="Bulanan">Bulanan</option>
                            <option value="Tahunan">Tahunan</option>
                        </select>
                    </div>



                    <div class="form-group row">
                            <label for="outlet" class="col-md-4 col-form-label text-md-left">Outlet</label>

                            <div class="col-md-8">
                                <input id="outlet" type="text" class="form-control{{ $errors->has('outlet') ? ' is-invalid' : '' }}" name="outlet" value="{{ old('outlet') }}" required autofocus>

                                @if ($errors->has('outlet'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('outlet') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="alamat" class="col-md-4 col-form-label text-md-left">Alamat</label>

                            <div class="col-md-8">
                                <input id="addressLine1" type="text" class="form-control{{ $errors->has('addressLine1') ? ' is-invalid' : '' }}" name="addressLine1" value="{{ old('addressLine1') }}" placeholder="Address Line #1" required autofocus>

                                @if ($errors->has('addressLine1'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('addressLine1') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="addressLine2" type="text" class="form-control" name="addressLine2" value="{{ old('addressLine2') }}" placeholder="Address Line #2" required autofocus>

                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="kelurahan" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="kelurahan" type="text" class="form-control{{ $errors->has('kelurahan') ? ' is-invalid' : '' }}" name="kelurahan" value="{{ old('kelurahan') }}" placeholder="Kelurahan" required autofocus>

                                @if ($errors->has('kelurahan'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('kelurahan') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="kecamatan" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="kecamatan" type="text" class="form-control{{ $errors->has('kecamatan') ? ' is-invalid' : '' }}" name="kecamatan" value="{{ old('kecamatan') }}" placeholder="Kecamatan" required autofocus>

                                @if ($errors->has('kecamatan'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('kecamatan') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="kota" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="kota" type="text" class="form-control{{ $errors->has('kota') ? ' is-invalid' : '' }}" name="kota" value="{{ old('kota') }}" placeholder="Kota"  required autofocus>

                                @if ($errors->has('kota'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('kota') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="provinsi" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="provinsi" type="text" class="form-control{{ $errors->has('provinsi') ? ' is-invalid' : '' }}" name="provinsi" value="{{ old('provinsi') }}" placeholder="Provinsi" required autofocus>

                                @if ($errors->has('provinsi'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('provinsi') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="zipCode" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="zipCode" type="text" class="form-control{{ $errors->has('zipCode') ? ' is-invalid' : '' }}" name="zipCode" value="{{ old('zipCode') }}" placeholder="Kode Pos" required autofocus>

                                @if ($errors->has('zipCode'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('zipCode') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="PIC" class="col-md-4 col-form-label text-md-left">PIC</label>

                            <div class="col-md-8">
                                <input id="PIC" type="text" class="form-control{{ $errors->has('PIC') ? ' is-invalid' : '' }}" name="PIC" value="{{ old('PIC') }}" required autofocus>

                                @if ($errors->has('PIC'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('PIC') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-left">Email</label>

                            <div class="col-md-8">
                                <input id="email" type="text" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus>

                                @if ($errors->has('email'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Add
                                </button>
                            </div>
                    </div>


                    @if($errors->any())
                        <div class="category-msg-error">{{ $errors->first() }}</div>
                    @endif

                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('extra')
<script>
$(document).ready(function(){
    $('.dynamic').change(function(){
        if($(this).val()!=''){
            var select = $(this).attr("id");
            var value = $(this).val();
            var dependent = $(this).data('dependent');
            var __token = $('input[name=_token"]').val();
            $.ajax({
                url:"{{route('dynamicdependent.fetch')}}",
                method:"POST",
                data:{select:select, value:value, _token:_token,
                dependent=dependent},
                success:function(result){
                    $('#+dependent').html(result);
                }
            })
        }
    });
});
</script>
@endsection

请帮忙。我也是Laravel的新人

Answer 1

有两个错误： -

1. 在ajax请求数据中，您设置的dependent=dependent应为dependent: dependent。
2. 在成功响应中，您正在设置此$('#+dependent').html(result);但这不正确。它应该是这个$('#'+dependent).html(result);

下面是完整的jQuery代码：

<script>
$(document).ready(function(){
    $('.dynamic').change(function(){
        if($(this).val()!=''){
            var select = $(this).attr("id");
            var value = $(this).val();
            var dependent = $(this).data('dependent');
            var __token = $('input[name=_token"]').val();
            $.ajax({
                url:"{{route('dynamicdependent.fetch')}}",
                method:"POST",
                data:{
                    select:select, 
                    value:value, 
                    _token:_token,
                    dependent:dependent
                },
                success:function(result){
                    $('#'+dependent).html(result);
                }
            });
        }
    });
});
</script>

如果这样做无效，请检查并告诉我。我会尽力解决你的问题。