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

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

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

<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">
        </select>
        @if($errors->has('device_name_id'))
            <span class="help-block">{{ $errors->first('device_name_id') }}</span>
        @endif
    </div>
</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 data = JSON.parse('{!! $options !!}');
            let device_names = [];
            let specs = [];
            let device_id = '{{ $device_id }}';
            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_id)', function(data) {
                device_id = data.value;
                device_name_id = '';
                spec_id = '';
                updateDeviceName()
            });

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

            updateDeviceName();

            function updateDeviceName() {
                let device_index = getIndex(data, device_id);
                device_names = data[device_index].names;
                let options = '';
                for(let i = 0; i < device_names.length; ++i) {
                    options += '<option value=' + device_names[i].value + (parseInt(device_names[i].value) === parseInt(device_name_id) ? ' selected' : '') + '>' + device_names[i].text + '</option>'
                }
                $("select[name='device_name_id']").html(options);
                form.render('select');
                if(hide_spec === 'no') 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>