从JSON接收设置选择器值

时间:2018-08-29 20:42:08

标签: jquery json

我有一个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>

1 个答案:

答案 0 :(得分:1)

执行$("#power").html(data.p)时,将从选择器中删除所有选项。这会将<select>元素的内容设置为data.p的值。它返回$("#power") jQuery对象,该对象永远不会== "off",因此if会失败,并且其余代码也永远不会运行。

您可能想做的事情是这样的:

$("#power").val(data.p == "off" ? "0" : "1");

DEMO

在演示中,我不得不使用$.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));
  });
};
相关问题