如何使用JSON stringify数据附加下拉列表

时间:2013-09-27 09:48:09

标签: javascript jquery html json drop-down-menu

我的结果如下。 (id& value)

  

{“5702”:“早上7点 - 上午10点”,“5703”:“上午10点 - 下午1点”,“5704”:“12点 -   下午3点“,”5705“:”下午3点 - 下午6点“,”5706“:”下午6点 - 晚上9点“,”5707“:”晚上7点 -   晚上10点“,”5708“:”晚上9点 - 早上12点“,”5709“:”早上12点 - 早上7点“,”5730“:”AZRAAR 123“}

如下所示。

JSON.stringify(<?php echo $timeWindowJson ?>)

现在我正在添加虚拟下拉。

var array = selectedDates.split(",");
      var dynamicTable = "<table id='tbl_dynamic_call_dates'><tr><td>Appointment date</td><td>Client time window</td>";
      $.each(array, function(i) {
         dynamicTable += "<tr><td>" + array[i] + "</td><td>" + "<select><option value='volvo'>7am - 10am</option></select>" + "</td></tr>";
      });
      dynamicTable += "</table>";
      $("#div_outgoing_call_dates_rows").append(dynamicTable);

但我希望附加的下拉列表是这样的。

<select name="CSSAtapsClient[gender_type_id]" class="long" id="gender_type_id">
<option value="">- - Select Gender - -</option>
<option value="5702">7am - 10am</option>
<option value="5703">10am - 1pm</option>
<option value="5704">12pm - 3pm</option>

......(直到从json字符串添加所有值)     

3 个答案:

答案 0 :(得分:3)

等一下你提供的字符串不是JSON ....你可以先纠正它......

示例JSON STRING应该看起来像

[{"id":"1063","dewr_code":"Unknown Division - ML & Psych"},{"id":"1066","dewr_code":"YorkePDGP - Dale"}]

您可以在AJAX调用中尝试这样的事情......

success: function(data) {
            $('#state_id').html('').append('<option value="">- - Select State - -</option>');
            $.each(data, function(i, value) {
               $('#state_id').append('<option value="' + value.id + '">' + value.state + '</option>');
            });
            $('#state_id').trigger('change');
         }

答案 1 :(得分:1)

如果您显示的数据不是合适的json(因为它看起来不像json),您可以尝试一下,

var array = selectedDates.replace("{","").replace("}","").split(",");
var selectHTML = "<select><option value=''>--Select--</option>";
$.each(array, function(i,value) {
    selectHTML += "<option value='"+value.split("-")[0]+"'>"+value.split("-")[1]+"</option>";
});
selectHTML += "</select>";
var dynamicTable = "<table id='tbl_dynamic_call_dates'><tr><td>Appointment date</td><td>Client time window</td>";
$.each(array, function(i,value) {
 dynamicTable += "<tr><td>" + value.split("-")[0] + "</td><td>" + selectHTML + "</td></tr>";
});
dynamicTable += "</table>";
$("#div_outgoing_call_dates_rows").append(dynamicTable);

这应该适合你。

答案 2 :(得分:1)

在您的HTML中:

<select id="gender_type_id">
  <option value="">- - Select Gender - -</option>
</select>

在您的Javascript中:

$.each(obj, function(key, value) {
  $('#gender_type_id').append('<option value="' + key + '">' + value + '</option>');
});

你调用数组的东西不是数组。它只是一个具有许多属性的JS对象。使用each很好,但是你需要传递键和值而不是元素和索引。

See it working here