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

<?php
?>
<style type="text/css">
    #sg-device-select-app {
        display: inline;
    }
</style>
<div id="sg-device-select-app">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <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>
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <select name="device_name_id" lay-filter="device_name_id">
            </select>
        </div>
    </div>
    @if(!isset($hide_spec))
    <div class="layui-inline">
        <div class="layui-input-inline">
            <select name="spec_id" lay-filter="spec_id">
            </select>
        </div>
    </div>
    @endif
</div>
<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 hide_spec = '{{ isset($hide_spec) ? "yes" : "no" }}';

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

            form.on('select(device_name_id)', function(data) {
                device_name_id = data.value;
                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 + '>' + 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 + '>' + 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>