CODEWITHSUNDEEP
javascriptjqueryhtmljsondrop-down-menu
dev1234
dev1234

Reputation: 5706

how to append a dropdown using the JSON stringify data

i am having the results as following. (id & value)

{"5702":"7am - 10am","5703":"10am - 1pm","5704":"12pm - 3pm","5705":"3pm - 6pm","5706":"6pm - 9pm","5707":"7pm - 10pm","5708":"9pm - 12am","5709":"12am - 7am","5730":"AZRAAR 123"}

This is taken as below.

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

Now i am having this append dummy drop down.

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);

but i want the dropdown appended to be like this.

<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>

...... (till all the values are added from json string)

Upvotes: 0

Views: 1822

Answers (3)

Andy
Andy

Reputation: 63524

In your HTML:

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

In your Javascript:

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

The thing you're calling an array isn't an array. It's just a JS object with a number of properties. Using each is fine, but you need to pass the key and value through rather than the element and index.

See it working here.

Upvotes: 1

Ashis Kumar
Ashis Kumar

Reputation: 6544

You can give this a try if your shown data is not a proper json (as it dont look like 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);

This should work for you.

Upvotes: 1

Shareek Ahamed
Shareek Ahamed

Reputation: 378

Wait a minute the string you have provided is not JSON.... you may correct it first...

Sample JSON STRING SHOULD LOOK LIKE THIS

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

You may try something like this inside the AJAX call.....

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');
         }

Upvotes: 3

Related Questions