我有一个html端,可以从后端函数以以下格式接收JSON对象
{“p”: “off”, “h”: “off”, “t”: “32”}
我想比较接收到的值并更新select和slider选项值(例如,如果我在JSON参数中收到“ on”,则将选择器设置为on)
为此,我正在使用jQuery,但无论尝试如何,我都无法获得#power选择器来更改值
如果您知道该怎么做的话,可能真的很简单...
有人可以帮我吗?
HTML和脚本
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>TEST</h1>
</div>
<form>
<div class = "ui-field-contain">
<select id = "power">
<option option value = "0">Power OFF</option>
<option option value = "1">Power ON</option>
</select>
<select id = "heater">
<option value value = "0">Heater OFF</option>
<option value value = "1">Heater ON</option>
</select>
</div>
</form>
<label for="slider">Temp: </label>
<input type="range" name="temp" id="temp" value="38" min="20" max="42" data-highlight = "true">
<input type="submit" name="submit" id="submit" value="Set Temp">
</select>
<script>
setInterval(function() {
updateStatus();
}, 2000); //2000mSeconds update rate
function updateStatus(){
$.getJSON('/status.json', function(data){
if ($('#power').html(data.p) == "off") {
$("#power").val($("#power option:eq(0)").val());
$("#power").selectmenu("refresh");
}
}).fail(function(err){
console.log("err getJSON mesures.json "+JSON.stringify(err));
});
};
</script>
</body>
</html>
答案 0 :(得分:1)
执行$("#power").html(data.p)
时,将从选择器中删除所有选项。这会将<select>
元素的内容设置为data.p
的值。它返回$("#power")
jQuery对象,该对象永远不会== "off"
,因此if
会失败,并且其余代码也永远不会运行。
您可能想做的事情是这样的:
$("#power").val(data.p == "off" ? "0" : "1");
在演示中,我不得不使用$.post
而不是$.getJSON
,因为jsfiddle的AJAX服务器要求JSON请求使用POST方法。但这不应该影响响应的处理方式。
整个代码应如下所示:
function updateStatus(){
$.getJSON('/status.json', function(data){
$("#power").val(data.p == "off" ? "0" : "1").selectmenu("refresh");
}).fail(function(err){
console.log("err getJSON mesures.json "+JSON.stringify(err));
});
};