RailwayTwo/resources/views/share/name-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_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>
        </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 device_names = JSON.parse('{!! $options !!}');
            let specs = [];
            let device_name_id = '{{ $device_name_id }}';
            let hide_spec = '{{ isset($hide_spec) ? "yes" : "no" }}';


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