JSON价值没有得到追加到HTML中正确

我有一个JSON对象JSON价值没有得到追加到HTML中正确

var jsonString =[ 
    { 
     "key": "Monday, June 18, 2012", 
     "value": "10 00 AM|_mod,11 00 AM|_mod,12 00 PM|_mod,13 00 PM|_mod" 
    }, 
    { 
     "key": "Tuesday, June 19, 2012", 
     "value": "13 00 PM|_mod,13 30 PM|_mod,14 00 PM|_mod,14 30 PM|_mod,15 00 PM|_mod" 
    } 
];

我有两个下拉式选单，我试图以匹配与在关键的第一个下拉列表中选择关键JSON并使用适当的值填充第二个下拉列表。我想要的选项标签看起来像这样

<option value="10 00 AM|_mod">10 00 AM</option>

但我看到这个

enter image description here

我认为在10 6:00 AM空的空间| _mod是当DOM导致问题正在创建。

这是我的JS代码。

$('#event_date').change(function() { 
    var event_date = $("#event_date").val(); // first drop-down val 
    var time_type = null; 
    var time = null; 
    for (var x = 0; x < jsonString.length; x++) { 
     if (event_date == jsonString[x].key) { 
      var value = jsonString[x].value; 
      console.log(value); // output: 10 00 AM|_mod,11 00 AM|_mod,12 00 PM|_mod,13 00 PM|_mod 
      var value_split = value.split(","); 
      for (var i = 0; i < value_split.length; i++) { 
       console.log(value_split[i]); // works fine at index 0 I get 10 00 AM|_mod 
       time_type = value_split[i].split("|"); 
       time = time_type[0]; 
       $('#timeslotIdentifier').append("<option value =" + value_split[i] + ">" + time + "</option>"); 
      }; 
     }; 
    }; 
});

是否存在编码问题？我尝试添加断点，看起来很好，但是当我检查元素时，我看到了这一点。

enter image description here

来源

2012-06-06 Yeshwanth Venkatesh

这不是JSON，它是一个JavaScript数组。你的问题似乎与JSON没有任何关系。 –

你创建一个不带引号的属性值。

你应该使用jQuery来代替：

$('<option />').text(time).val(value_split[i]).appendTo('#timeslotIdentifier');

来源

2012-06-06 22:20:13 SLaks

忽略了那部分。非常感谢！！欣赏它 –

$('#event_date').change(function() { 
    var event_date = $("#event_date").val(); // first drop-down val 
    var time_type = null; 
    var time = null; 
    for (var x = 0; x < jsonString.length; x++) { 
     if (event_date == jsonString[x].key) { 
      var value = jsonString[x].value; 
      console.log(value); // output: 10 00 AM|_mod,11 00 AM|_mod,12 00 PM|_mod,13 00 PM|_mod 
      var value_split = value.split(","); 
      for (var i = 0; i < value_split.length; i++) { 
       console.log(value_split[i]); // works fine at index 0 I get 10 00 AM|_mod 
       time_type = value_split[i].split("|"); 
       time = time_type[0]; 
       $('#timeslotIdentifier').append($("<option>").attr({value: value_split[i]}).text(time)); 
      }; 
     }; 
    }; 
});

来源

2012-06-06 22:26:29 Kizer

jQuery的.val()在这种情况下肯定更好，但如果你不知道哪里是错误，它是在这里：

//Nope. (Missing quotes in HTML) 
$('#timeslotIdentifier') 
    .append("<option value =" + value_split[i] + ">" + time + "</option>"); 

//Yep. 
$('#timeslotIdentifier') 
    .append("<option value =\"" + value_split[i] + "\">" + time + "</option>");

来源

2012-06-06 23:27:49

JSON价值没有得到追加到HTML中正确

回答

相关问题