在 Laravel 上选择 OnChange Javascript
P粉765570115
P粉765570115 2023-12-21 22:37:07
[PHP讨论组]

我想这样做,以便当我单击其中一个下拉列表时,根据相关表中的记录 ID 的值立即出现。 我想要这样做,以便当我单击其中一个下拉列表时,会立即出现根据相关表中的记录 ID 的值。 当选择“golongan”时,“gaji pokok”的值会自动出现。 当选择“asisten ahli”时,“tunjangan fungsional”的值会自动出现。 当选择“主席助理|专家助理”时,“结构津贴”的值自动出现。

如何在 laravel 中使用 Javascript onChange 进行打包?

P粉765570115
P粉765570115

全部回复(1)
P粉311423594

抱歉,我不太懂你的语言,但你可以用 jquery 做这样的事情

<div class="form-group mb-3">
        <select  id="country-dropdown" class="form-control">
            <option value="">-- Select Country --</option>
            @foreach ($countries as $data)
            <option value="{{$data->id}}">
                {{$data->name}}
            </option>
            @endforeach
        </select>
    </div>
    <div class="form-group mb-3">
        <select id="state-dropdown" class="form-control">
        </select>
    </div>
    <div class="form-group">
        <select id="city-dropdown" class="form-control">
        </select>
    </div>

您可以将依赖下拉列表保留为空,然后通过ajax获取这些依赖下拉列表,如下所示:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {

        /*------------------------------------------
        --------------------------------------------
        Country Dropdown Change Event
        --------------------------------------------
        --------------------------------------------*/
        $('#country-dropdown').on('change', function () {
            var idCountry = this.value;
            $("#state-dropdown").html('');
            $.ajax({
                url: "{{url('api/fetch-states')}}",
                type: "POST",
                data: {
                    country_id: idCountry,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $('#state-dropdown').html('<option value="">-- Select State --</option>');
                    $.each(result.states, function (key, value) {
                        $("#state-dropdown").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                }
            });
        });

        /*------------------------------------------
        --------------------------------------------
        State Dropdown Change Event
        --------------------------------------------
        --------------------------------------------*/
        $('#state-dropdown').on('change', function () {
            var idState = this.value;
            $("#city-dropdown").html('');
            $.ajax({
                url: "{{url('api/fetch-cities')}}",
                type: "POST",
                data: {
                    state_id: idState,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city-dropdown").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });
                }
            });
        });

    });
</script>

并在ajax中声明你将在url中调用的路由

Route::post('etch-states', [DropdownController::class, 
'fetchState']);
Route::post('fetch-cities', [DropdownController::class, 'fetchCity']);

在控制器中执行如下操作:

public function fetchState(Request $request)
{
    $data['states'] = State::where("country_id", $request->country_id)
                            ->get(["name", "id"]);

    return response()->json($data);
}
/**
 * Write code on Method
 *
 * @return response()
 */
public function fetchCity(Request $request)
{
    $data['cities'] = City::where("state_id", $request->state_id)
                                ->get(["name", "id"]);
                                  
    return response()->json($data);
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号