这是我的第一个问题，我有一个用Java制作的WebSocket服务器和一个JavaScript / jQuery客户端，服务器运行良好，它向客户端发送一个JSON对象，客户端接收并且它应该附加{{ 1}}使用JSON对象的值到第二个option，这里是JSP的代码：
select当用户从第一个<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>
（从Servlet加载）中选择日期时，第二个select将失去select状态，但是没有附加选项，这里＆＃ 39; s客户收到的JSON：
disabled 更新：我意识到[
{
"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"
}
}
]
正在追加，但它们没有出现在点击事件上，可能是引导程序中出现的事情。
已解决：此代码：
option更改为：
$('select[name="horaagendamento"]').removeAttr('disabled').append(codigo);
$('.selectpicker').selectpicker();
Aparently Bootstrap在select周围创建$('select[name="horaagendamento"]').removeAttr('disabled').html(codigo);
$('select[name="horaagendamento"]').selectpicker();
和填充，所以首先替换选项而不是附加选项，然后必须在选项完成后手动调用divs方法。
答案 0 :(得分：0)
如果我理解你的逻辑是正确的，我有点改变你的代码来创建测试片段。一切都如此。请参阅片段，第一次改变组合框后将删除禁用状态
$('select[name="horaagendamento"]').removeAttr('disabled')
$(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>