Question

我正在尝试使用HTML和JQuery构建自定义控件。控件将显示文本值。用户可以输入各种键/值对。目前，我有以下HTML

<input id="keyValue" type="text" />
<select id="keyName" name="keyName">
  <option value="k1">Some Name</option>
  <option value="key2">Another Name</option>
  <option value="arg3">How about one more</option>
</select>
<input id="keyValuePairs" type="hidden" />

＆＃34; keyValue＆＃34;中显示的值将根据用户选择的选项进行更改。我试图将映射保留在keyValuePairs中。为了做到这一点，我有以下内容：

$('#keyName').on('change', function() {
  var key = $('#keyName').val();
  var keyValuePairs = $('#keyValuePairs').val();
  if (keyValuePairs[key]) {
    $('#keyValue').val(keyValuePairs[key]);
  } else {
    $('#keyValue').val('');
  }
});

$('#keyValue').on('change', function() {
  var key = $('#keyName').val();
  var keyValuePairs = $('#keyValuePairs').val();
  if (!keyValuePairs ) {
    keyValuePairs = {};
  }
  keyValuePairs[key] = $(this).val();
  $('#keyValuePairs').val(JSON.stringify(keyValuePairs));
});

由于某种原因，在我选择另一个键后，文本字段始终显示空白字符串。我相信它与我如何编码或解码JSON有关。当我向console.log添加keyValuePairs时，我注意到有时会包含引号，而其他时候则不包含引号。然而，代码对我来说是正确的。

我做错了什么？

Answer 1

我相信你读完之后应该是JSON.parse $（'＃keyValuePairs'）。val（）（因为你在设置值时对字符串进行字符串化）

更新：

您还必须确保该值不为空：

$('#keyName').on('change', function() {
    var key = $('#keyName').val();
    var val = $('#keyValuePairs').val();
    if (val && val.length > 0) {
        var keyValuePairs = JSON.parse(val);
        if (keyValuePairs[key]) {
            $('#keyValue').val(keyValuePairs[key]);
        } else {
            $('#keyValue').val('');
        }
    }
});

$('#keyValue').on('change', function() {
  var key = $('#keyName').val();
    var val = $('#keyValuePairs').val();
    var keyValuePairs;
    if (val && val.length > 0) {
        keyValuePairs = JSON.parse(val);
    } else {
        keyValuePairs = {};
    }
    keyValuePairs[key] = $(this).val();
    $('#keyValuePairs').val(JSON.stringify(keyValuePairs));
});

Answer 2

json_encode(#keyValuePairs)   //encoding
json_decode(#keyValuePairs)   //decoding
datatype : json

在隐藏的HTML元素中编码和解码JSON

2 个答案: