Ajax 在下拉选择中加载数据答案

【问题标题】：Ajax load data on dropdown selectAjax 在下拉选择中加载数据
【发布时间】：2016-12-17 22:09:07
【问题描述】：

我认为有一个下拉菜单。当我在下拉列表中选择一个项目时，应该加载 ajax。所以有一个表位置，它与联系人有一对多的关系。

因此，当我从位置下拉列表中选择一个位置时，应加载与该位置对应的联系人。但它没有发生。

控制器：

public function location_contacts()
{
    $contacts = Contact::all();
    return view('partials.bookavisit_contact')->with(['contacts' => $contacts]);
}

位置下拉菜单：

<div class="inline-control location-icon dropdown-icon">
    <select class="form-control" name="visit-location" id="visitLocation" onChange="getContact(value);" >
        <option date-person="lorem impsum" date-mail="lorem.ipsum@gmail.com" >Select Location</option>
        @foreach($locations as $location)
        <option date-person="lorem impsum" date-mail="lorem.ipsum@gmail.com" value="{!! $location->id !!}" >{!! $location->address !!}, {!! $location->city !!}, {!! $location->state !!}</option>
        @endforeach
    </select>
</div>

脚本：

@section('scripts')
<script type="text/javascript">

    function getContact(val) {

        var ajaxUrl = "/location_contacts";
        $.ajax({
            type: "POST",
            url: ajaxUrl,
            data:'location_id='+val,
            success: function(data){
                $("#contact").html(data);
            }
        });
    }
</script>
@endsection

部分联系方式：

<div id="location-contact-info">
    <div class="content-head" id="contact">
        <h5  class="wow fadeInUp">Lorem ipsum</h5>
    </div>
    @foreach($contacts as $contact)
    <div class="contact-info-group row">
        <div class="contact-label">Contact Person:
            <span id="location-contact-name">{{$contact->first_name}} {{$contact->last_name}}</span>
        </div>
    </div>
    <div class="contact-info-group row">
        <div class="contact-label">Email:
            <span id="location-contact-mail" ><a href="mailto:{{$contact->email}}">{{$contact->email}}</a></span>
        </div>
    </div>
    @endforeach
</div>

【问题讨论】：

试试$("#contact").append(data);
试过了！但什么也没发生，控制台上也没有错误
getContact的参数是val，应该是this.options[this.selectedIndex]
是的，成功了！不工作。
您是否收到有关您的 PHP 文件的请求？

标签： javascript php ajax laravel-5

【解决方案1】：

您的 html 中有错误，您的 ID contact 在您的部分中，需要像这样在您的主视图中：

<div class="inline-control location-icon dropdown-icon">
    <select class="form-control" name="visit-location" id="visitLocation" onChange="getContact(value);" >
        <option date-person="lorem impsum" date-mail="lorem.ipsum@gmail.com" >Select Location</option>
        @foreach($locations as $location)
        <option date-person="lorem impsum" date-mail="lorem.ipsum@gmail.com" value="{!! $location->id !!}" >{!! $location->address !!}, {!! $location->city !!}, {!! $location->state !!}</option>
        @endforeach
    </select>
</div>
<div id="contact"></div>

因此，$("#contact").html(data); 不起作用。

试试看。

问候

【讨论】：