<form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">主机型号</label>
                    <div class="layui-input-block">
                        <select name="proId" id="proId" lay-filter="proId" lay-search="" lay-verify="required">
                            <option value="">请搜索或者选择主机</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item" id="roomid_show" style="display: none;">
                    <label class="layui-form-label">数据机房</label>
                    <div class="layui-input-block">
                        <select name="roomid" id="roomid" lay-filter="roomid" lay-verify="required">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="os_show" style="display: none;">
                    <label class="layui-form-label">操作系统</label>
                    <div class="layui-input-block">
                        <select name="os" id="os" lay-filter="os" lay-verify="required">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="mysql_show" style="display: none;">
                    <label class="layui-form-label">MYSQL版本</label>
                    <div class="layui-input-block">
                        <select name="mysql" id="mysql" lay-filter="mysql" lay-verify="required">
                        </select>
                    </div>
                </div>
                <input name="orderid" id="tag_orderid" value="" style="display: none;">
                <div class="layui-form-item" style="text-align: center;display: none;" id="save">
                    <button class="layui-btn" lay-submit="" lay-filter="save"> 开通试用主机 </button>
                </div>
                <div style="clear: both;"></div>
            </form>

layui.use(['form', 'util'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.jquery;
        var api = 'https://op.nx260.com';

        products(api);
        form.on('select(proId)', function (data) {
            $.ajax({
                'url': api + '/api.westvhosttest/vhost?proId=' + data.value,
                type: 'GET',
                success: function (s) {
                    Cookies.set('vhost_server', JSON.stringify(s.data.server));
                    $("#roomid").empty(); $("#os").empty(); $("#mysql").empty(); $("#os_show").hide(); $("#mysql_show").hide(); $("#save").hide();
                    $('#roomid').append(new Option('', ''));
                    $.each(s.data.server, function (index, value) {
                        $('#roomid').append(new Option(value.name, index));
                    });
                    form.render('select');
                    $("#roomid_show").show();
                }
            })
        });
        form.on('select(roomid)', function (data) {
            var server = JSON.parse(Cookies.get('vhost_server'));
            $("#os").empty();
            $('#os').append(new Option('', ''));
            $.each(server[$("#roomid").val()].os, function (index, value) {
                $('#os').append(new Option(index, index));
            });
            form.render('select');
            $("#os_show").show();
        });
        form.on('select(os)', function (data) {
            var server = JSON.parse(Cookies.get('vhost_server'));
            $("#mysql").empty();
            $('#mysql').append(new Option('', ''));
            $.each(server[$("#roomid").val()].os[$("#os").val()], function (index, value) {
                $('#mysql').append(new Option(index, index));
            });
            form.render('select');
            $("#mysql_show").show(); $("#save").show();
        });


        form.on('submit(save)', function (data) {
            console.log(data);
            var play = layer.load(0, { shade: [0.1, '#fff'] });
            var data = data.field;
            $.ajax({
                type: 'post',
                url: api + '/api.westvhosttest/create',
                data: data,
                success: function (s) {
                    layer.close(play);
                    if (s.result == 200) {
                        layer.msg('开通试用主机成功！');
                        location.reload();
                    } else {
                        if (s.msg) {
                            layer.msg(s.msg);
                        } else {
                            layer.msg('请重试或者换机型重试！');
                        }
                    }
                },
                error: function (s) {
                    layer.alert('网络错误，请刷新重试！<br>如遇一直错误，可过会儿再试..');
                    layer.close(play);
                }
            });
            return false;
        });

        function products(api) {
            $.ajax({
                url: api + '/api.westvhosttest/select?ac=products',
                dataType: 'json',
                type: 'get',
                success: function (resData) {
                    $.each(resData.data, function (index, value) {
                        $('#proId').append(new Option('【' + value.proId + '】' + value.name, value.proId));
                    });
                    form.render('select');
                },
                error: function (s) {
                    layer.alert('网络错误，请刷新重试！<br>如遇一直错误，可过会儿再试..');
                }
            });
        }
    });