javascript - (JQUERY) - 通过 WebSocket 返回 JSON 对象并应用于选择不起作用

Question

这是我的第一个问题，我有一个用 Java 制作的 WebSocket 服务器和一个 JavaScript/jQuery 客户端，服务器工作得很好，它向客户端发送一个 JSON 对象，客户端接收并且应该附加 选项 到第二个 select 并使用 JSON 对象的值，以下是 JSP 的代码:

<form method="POST" action="#" id="formAgendamento">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Dias Disponíveis</label>
                <select name="dataagendamento" class="selectpicker" data-title="Escolha o dia" data-style="btn-default btn-block" data-menu-style="dropdown-blue">
                    <c:forEach var="dia" items="${dias}">
                        <option value="${dia.idDia}"><fmt:formatDate value="${dia.dataDia}" pattern="dd/MM/yyyy"/></option>
                    </c:forEach>
                </select>
            </div>

            <div class="form-group">
                <label>Horários Disponíveis</label>
                <select name="horaagendamento" class="selectpicker" data-title="Escolha um horário" data-style="btn-default btn-block" data-menu-style="dropdown-blue" disabled>
                </select>
            </div>

            <div class="form-group text-center">
                <button type="submit" class="btn btn-danger btn-fill btn-wd">Agendar</button>
                <div id="log"></div> <!-- This is to see if WebSocket is working -->
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        // WebSocket here
        if (!("WebSocket" in window)) {
            sweetAlert('Oops, este navegador não suporta WebSocket!', '', 'warning');
        } else {
            connect();

            function connect() {
                var socket;
                var host = "ws://${pageContext.request.serverName}:${pageContext.request.localPort}${pageContext.request.contextPath}/atualizahorario";

                try {
                    var socket = new WebSocket(host);

                    message('<p class="event">Socket status: ' + socket.readyState + '</p>');

                    socket.onopen = function () {
                        message('<p class="event">Socket status: ' + socket.readyState + ' (Opened)</p>');
                    };
                    socket.onmessage = function (msg) {
                        //message('<p class="text-success">' + msg.data + '</p>');
                        criarSelectHorarios(converterEmObjeto(msg.data));
                    };
                    socket.onclose = function () {
                        message('<p class="event">Socket Status: ' + socket.readyState + ' (Closed)');
                    };
                } catch (exception) {
                    message('<p class="text-danger">Erro: ' + exception + '</p>');
                }

                function message(msg) {
                    $('#log').append(msg + '<br/>');
                }

                function desconectar() {
                    socket.close();
                }

                function enviarAoServer(texto) {
                    socket.send(texto);
                }

                function converterEmObjeto(jsonObject) {
                    var DiaHorario = JSON.parse(jsonObject);
                    return DiaHorario;
                }

                function criarSelectHorarios(DiaHorario) {
                    var codigo = "";
                    for (var i = 0; i < DiaHorario.length; i++) {
                        var idHorario = DiaHorario[i].horario.idHorario;
                        var horarioInicioTermino = DiaHorario[i].horario.horarioInicioTermino;

                        codigo += '<option value="' + idHorario + '">' + horarioInicioTermino + '</option>';
                    }

                    $('.form-group .bootstrap-select').removeClass('disabled');
                    $('.form-group .bootstrap-select button').removeClass('disabled');
                    $('select[name="horaagendamento"]').removeAttr('disabled').append(codigo);
                    $('.selectpicker').selectpicker();
                }

                $('select[name="dataagendamento"]').change(function () {
                    enviarAoServer($(this).val());
                });
            }
        }
    });
</script>

当用户从第一个 select(从 Servlet 加载)中选择日期时，第二个 select 会解除其disabled 状态，但是未附加选项，这是客户端收到的 JSON:

[
    {
        "dia":{
            "idDia":2,
            "dataDia":"May 22, 2017 12:00:00 AM"
        },

        "horario":{
            "idHorario":1,
            "horarioInicioTermino":"08:00-08:30"
        }
    },

    {
        "dia":{
            "idDia":2,
            "dataDia":"May 22, 2017 12:00:00 AM"
        },

        "horario":{
            "idHorario":2,
            "horarioInicioTermino":"08:30-09:00"
        }
    }
]

更新:我意识到正在附加选项，但它们没有显示在点击事件上，可能是 Bootstrap 的某些内容。

已解决:此代码:

$('select[name="horaagendamento"]').removeAttr('disabled').append(codigo);
$('.selectpicker').selectpicker();

更改为:

$('select[name="horaagendamento"]').removeAttr('disabled').html(codigo);
$('select[name="horaagendamento"]').selectpicker();

显然，Bootstrap 在选择周围创建了 div 和内容，因此首先选项被替换而不是附加，其次必须在选择之后手动调用 selectpicker() 方法选项已经完成。

Answer 1

如果我理解你的逻辑正确，我会稍微改变你的代码来创建测试片段。一切都照常进行。请参阅代码片段，第一个组合框更改后禁用状态将被删除

$('select[name="horaagendamento"]').removeAttr('已禁用')

$(document).ready(function(){
        // WebSocket here
        if (!("WebSocket" in window)) {
            sweetAlert('Oops, este navegador não suporta WebSocket!', '', 'warning');
        } else {
            connect();

            function connect() {
                /*var socket;
                var host = "ws://${pageContext.request.serverName}:${pageContext.request.localPort}${pageContext.request.contextPath}/atualizahorario";

                try {
                    var socket = new WebSocket(host);

                    message('<p class="event">Socket status: ' + socket.readyState + '</p>');

                    socket.onopen = function () {
                        message('<p class="event">Socket status: ' + socket.readyState + ' (Opened)</p>');
                    };
                    socket.onmessage = function (msg) {
                        //message('<p class="text-success">' + msg.data + '</p>');
                        criarSelectHorarios(converterEmObjeto(msg.data));
                    };
                    socket.onclose = function () {
                        message('<p class="event">Socket Status: ' + socket.readyState + ' (Closed)');
                    };
                } catch (exception) {
                    message('<p class="text-danger">Erro: ' + exception + '</p>');
                }*/
                

                function message(msg) {
                    $('#log').append(msg + '<br/>');
                }

                function desconectar() {
                    socket.close();
                }

                function enviarAoServer(texto) {
                    //socket.send(texto);
                    criarSelectHorarios(converterEmObjeto('[    {        "dia":{            "idDia":2,            "dataDia":"May 22, 2017 12:00:00 AM"        },        "horario":{            "idHorario":1,            "horarioInicioTermino":"08:00-08:30"        }    },    {        "dia":{            "idDia":2,            "dataDia":"May 22, 2017 12:00:00 AM"        },        "horario":{            "idHorario":2,            "horarioInicioTermino":"08:30-09:00"        }    }]'));
                }

                function converterEmObjeto(jsonObject) {
                    var DiaHorario = JSON.parse(jsonObject);
                    return DiaHorario;
                }

                function criarSelectHorarios(DiaHorario) {
                    var codigo = "";
                    for (var i = 0; i < DiaHorario.length; i++) {
                        var idHorario = DiaHorario[i].horario.idHorario;
                        var horarioInicioTermino = DiaHorario[i].horario.horarioInicioTermino;

                        codigo += '<option value="' + idHorario + '">' + horarioInicioTermino + '</option>';
                    }

                    $('.form-group .bootstrap-select').removeClass('disabled');
                    $('.form-group .bootstrap-select button').removeClass('disabled');
                    $('select[name="horaagendamento"]').removeAttr('disabled').append(codigo);
                    //$('.selectpicker').selectpicker();
                }

                $('select[name="dataagendamento"]').change(function () {
                    enviarAoServer($(this).val());
                });
            }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="#" id="formAgendamento">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Dias Disponíveis</label>
                <select name="dataagendamento" class="selectpicker" data-title="Escolha o dia" data-style="btn-default btn-block" data-menu-style="dropdown-blue">
                    <c:forEach var="dia" items="${dias}">
                        <option value="${dia.idDia}"><fmt:formatDate value="${dia.dataDia}" pattern="dd/MM/yyyy"/></option>
                    </c:forEach>
                    
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </div>

            <div class="form-group">
                <label>Horários Disponíveis</label>
                <select name="horaagendamento" class="selectpicker" data-title="Escolha um horário" data-style="btn-default btn-block" data-menu-style="dropdown-blue" disabled>
                </select>
            </div>

            <div class="form-group text-center">
                <button type="submit" class="btn btn-danger btn-fill btn-wd">Agendar</button>
                <div id="log"></div> <!-- This is to see if WebSocket is working -->
            </div>
        </div>
    </div>
</form>