How can i make drop down values Selected using Javascript by jsonencode data

Question

In my html form i have 9 drop down values which if user action is Edit then it will fetch the values from database and return in the jsonencode format.as below,

JSON DATA

 [{"ed_gender":"Male","ed_blood_group":"A-","ed_marital_status":"Single","ed_branch_id":"11","ed_desig_id":"1","ed_job_type":"Permanent","ed_pay_mode":"Cheque"}] 

HTML

 <select name="ed_gender" class="form-control">
    <option value="">Select</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
 </select>

 <select name="ed_marital_status" class="form-control">
    <option value="">Select</option>
    <option value="Single">Single</option>
    <option value="Married">Married</option>
 </select> 

I tried few lines of code using php its actually works but i am trying using javascript.

PHP

 <select name="ed_marital_status" class="form-control">
    <option value="">Select</option>
    <option <?php if($ed_marital_status=="Single") echo 'selected="selected"'; ?> value="Single">Single</option>
    <option <?php if($ed_marital_status=="Married") echo 'selected="selected"'; ?> value="Married">Married</option>
 </select> 

So here Behave i have to extract the json values and make dropdown values has "Selected" on page loads.

EDITED :

JSON DATA

 [{"ed_branch_id":"11","ed_desig_id":"1"}] 

HTML

 <select name="ed_job_location" class="form-control">
     <option value="">Select</option>
      <?php
       foreach($get_branches as $branches){
              $branches_id   = $branches->b_id;
              $branches_name = $branches->b_name; 
              $branches_code = $branches->b_code; 
              echo "<option value='$branches_id||$branches_name||$branches_code'>$branches_name</option>";
       }?>
  </select>

  <select name="ed_desig_id" class="form-control">
      <option value="">Select</option>
      <?php
      foreach($get_designation as $designations){
             $designations_id   = $designations->d_id;
             $designations_name = $designations->d_designation; 
             $designations_code = $designations->d_code; 
             echo "<option value='$designations_id||$designations_code'>$designations_name</option>";
       }?>
   </select>

Here from above json, i am getting only branch id and desig id, But here i have value with || symbol in the select option, so i need to find particular id and show it in the drop down.

Answer 1

Iterate through the array of json objects and fill each element value by selecting it through its name:

 var json = [{"ed_gender":"Male","ed_blood_group":"A-","ed_marital_status":"Single","ed_branch_id":"11","ed_desig_id":"1","ed_job_type":"Permanent","ed_pay_mode":"Cheque"}]; $(document).ready(function(){ $.each(json[0], function(index, element) { $("[name="+index + "]").val(element); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="ed_gender" class="form-control"> <option value="">Select</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> <select name="ed_marital_status" class="form-control"> <option value="">Select</option> <option value="Single">Single</option> <option value="Married">Married</option> </select> 

EDIT:

You can explicitly set the values to cover the special case of branch values concatenation with || outside the loop, as long as the values are within the json data returned :

$(document).ready(function(){

       $("[name=ed_job_location]").val(json[0].branches_id + "||" + json[0].branches_name + "||" + json[0].branches_code);

    });