Question

我有一个ajax请求，它返回一个选择表单输入的选项列表。我有一个json代表一个地址的每个选项的值。但是，双引号会导致出现问题，只有第一个{会返回到后端。

查看chrome dev工具中的值，我可以看到chrome识别的值是第一个{而不是整个json。如何获取选择的值以正确保存json值。

浏览器中显示的选项值为：

<option value="{" dept":="" "",="" "orgn":="" "pobx":="" "subb":="" "bnam":="" "aspen",="" "bnum":="" "dpth":="" "thor":="" "knoll="" road",="" "ddlo":="" "dplo":="" "town":="" "",="" "cnty":="" "surrey",="" "pcod":="" "gu9="" 2XZ",="" "ppco":="" "tpco":="" 2ep"}"="">ASPEN</option>

ajax事件是：

$(document).ready(function () {
  $('#id_previous2_postcode').change(function () {
    var postcode2 = $(this).val()
    console.log(postcode2)
    $.ajax({
      url: '/users/prior_addresses_ajax/',
      data: {
        'postcode': postcode2
      },
      dataType: 'json',
      success: function (data) {
        options = data.property_choices.map(function (subarray) {
          return '<option value="' + subarray[0] + '">' + subarray[1] + '</option>'
        })
        $('#id_previous2_full_address').html(options)
      }
    })
  })
})

Answer 1

您可以使用new Option构造函数来避免字符串连接。这适用于任何字符串值。

const data = {
  property_choices: [
    ['value1', 'text1'],
    ['value2', 'text2'],
    ['value3', 'text3']
  ]
};

const select = document.querySelector('#id_previous2_full_address');

data.property_choices.forEach(subarray => {
  const option = new Option(subarray[1], subarray[0]);
  select.options.add(option);
});

<select id="id_previous2_full_address">
  <option>None</option>
</select>

如果值是对象而不是像我上面的示例那样的字符串，则可能需要调用JSON.stringify(subarray[0])。

在选择选项值中使用Json - 由双引号引起的错误

1 个答案: