RailwayTwo/resources/views/share/name-select-form.blade.php

<?php
?>
<style type="text/css">

</style>
<div class="layui-form-item {{ $errors->has('device_name_id') ? 'has-error' : '' }}">
    <label class="layui-form-label" style="padding: 0px;">设备名称</label>
    <div class="layui-input-block">
        <select name="device_name_id" lay-filter="device_name_id">
            @foreach($options as $option)
                <option value="{{$option->value}}" {{$option->value == $device_name_id ? 'selected' : ''}}>{{$option->text}}</option>
            @endforeach
        </select>
        @if($errors->has('device_name_id'))
            <span class="help-block">{{ $errors->first('device_name_id') }}</span>
        @endif
    </div>
    @if($errors->has('device_name_id'))
        <span class="help-block">{{ $errors->first('device_name_id') }}</span>
    @endif
</div>

@if(!isset($hide_spec))
<div class="layui-form-item {{ $errors->has('spec_id') ? 'has-error' : '' }}">
    <label class="layui-form-label" style="padding: 0px;">规格型号</label>
    <div class="layui-input-block">
        <select name="spec_id" lay-filter="spec_id">
        </select>
        @if($errors->has('spec_id'))
            <span class="help-block">{{ $errors->first('spec_id') }}</span>
        @endif
    </div>
</div>
@endif
<script>
    $(function() {
        layui.use(['form'], function() {
            let form = layui.form;
            let device_names = JSON.parse('{!! $options !!}');
            let specs = [];
            let device_name_id = '{{ $device_name_id }}';
            let spec_id = '{{ $spec_id }}';
            let hide_spec = '{{ isset($hide_spec) ? "yes" : "no" }}';
            // console.log(hide_spec)

            form.on('select(device_name_id)', function(data) {
                device_name_id = data.value;
                spec_id = '';
                updateSpec()
            });

            updateSpec();

            function updateSpec() {
                let name_index = getIndex(device_names, device_name_id);
                specs = device_names[name_index].specs;
                let options = '';
                for(let i = 0; i < specs.length; ++i) {
                    options += '<option value=' + specs[i].value + (parseInt(specs[i].value) === parseInt(spec_id) ? ' selected' : '') + '>' + specs[i].text + '</option>'
                }
                $("select[name='spec_id']").html(options);
                form.render('select');
            }

            function getIndex(list, id) {
                id = parseInt(id);
                for(var i = 0; i < list.length; ++i) {
                    if(list[i].value === id) return i;
                }
                return 0;
            }
        })
    })
</script>