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

Question

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

查看 chrome dev tools 中的值我可以看到 chrome 识别的值是第一个 { 而不是整个 json。如何获取 select 的值以正确保存 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])。