title: Binding the selected value to dynamically created dropdown jQuery
body: <p>I've created dynamic dropdowns inside a datatable. There are three dropdowns out of which one dropdown is controlled by a control outside the datatable. I've problems with other two dropdowns. I get the value bound with the  <code>&lt;select&gt;</code> but I'm unable to show the selected value. This is how I tried:</p>
  
  <pre><code>   var a = 0;   
          var b = 0;
          var c = 0;
          var d = 0;
          var e = 0;
  
      MomActivity = $("#MomActivity").DataTable({
                  "sDom": "t",
                  "ajax":{
                      "url": "../api/momapi.php?action=getmombyid",
                      "type": "GET",
                      "data": {"MomID": &lt;?php echo $_GET["MomID"]; ?&gt;}    
                  },
                  "destroy": true,
                  "ordering": false,
                  "columns": [
                              {
                                  "title": "Project", "data": "projectid", "render": function(data, type, row){
                                      myFunction(data , "Project_"+a);
                                      return '&lt;select class="form-control selectProjectID" id="Project_'+a+'" name="ProjectID[]" valueid="'+ data +'"&gt;&lt;/select&gt;';
                                  }   
                              },
                              {
                                  "title": "What", "data": "what", "render": function(data, type, row){
                                      return  '&lt;input type="text" class="form-control" name="What[]" value="'+ data +'"&gt;';            
                                  }
                              },
                              {
                                  "title": "For", "data": "momfor", "render": function(data, type, row){
                                      var UserSide = "";
                                      var CustomerSide = "";  
                                      if(data == "0"){
                                          UserSide = 'checked="checked"';                                 
                                          CustomerSide = "";                                  
                                      } else if(data == "1") {
                                          CustomerSide = 'checked="checked"';                                 
                                          UserSide = "";                                      
                                      }   
  
                                      return  '&lt;input type="radio" name="MomFor_'+b+'" class="MomFor" '+UserSide+' value="0"&gt; For User Side &amp;nbsp&amp;nbsp&amp;nbsp &lt;input type="radio" class="MomFor" name="MomFor_'+b+'" '+CustomerSide+' value="1"&gt; For Customer Side';            
                                  }
                              },
                              {
                                  "title": "Who", "data": "who", "render": function(data, type, row){
                                      return  '&lt;select class="form-control selectWho" name="Who_'+d+'" id="Who_'+c+'" valueid="'+ data +'"&gt;';         
                                  }
                              },
                              {
                                  "title": "When", "data": "whentime", "render": function(data, type, row){
                                      return  '&lt;input type="text" class="form-control whendate" name="When[]" value="'+ moment(data).format("DD-MM-YYYY") +'"&gt;';          
                                  }
                              },
                              {
                                  "title": "Status", "data": "status", "render": function(data, type, row){
  
  
                                  return  '&lt;select class="form-control status"  valueid="'+ data +'" name="Status_'+e+'" disabled&gt;&lt;option value="0"&lt;?= $data-&gt;status == '0' ? 'selected="selected"' : ''; ?&gt;&gt;Not Started&lt;/option&gt;&lt;option value="1"&lt;?= $data-&gt;status == '1' ? 'selected="selected"' : ''; ?&gt;&gt;In Progress&lt;/option&gt;&lt;option value="2"&lt;?= $data-&gt;status == '2' ? 'selected="selected"' : ''; ?&gt;&gt;Hold&lt;/option&gt;&lt;option value="3"&lt;?= $data-&gt;status == '3' ? 'selected="selected"' : ''; ?&gt;&gt;Completed&lt;/option&gt;&lt;/select&gt;';          
                              }
                          },
                          {
                              "title": "...", "render": function(data, type, row){
                                  return '&lt;input type="button" class="btn btn-default btn-sm remove" value="Remove" name="remove" id="remove"&gt;';  
  
  
                                  }
                              }
  
                  ],
                  "drawCallback": function(settings){
                      $(".selectProjectID").each(function(){
                              if($(this).find("option").length == 0){
                                  $(this).fillSelect(projectid,"projectid","projectname",0,1).val($(this).attr("valueid"));
                              }                   
                      });
                      $(".selectWho").each(function(){
                          if($(this).find("option").length == 0){
                              console.log($(this).attr("id"));
                              console.log($(this).attr("valueid"));
                              $(this).val($(this).attr("valueid")).trigger("change");
                          }                   
                      });
                      $(".status").each(function(){
                          if($(this).find("option").length &gt; 0){
                              console.log($(this).attr("valueid"));
  $(this).val($(this).attr("valueid")).trigger("change");
                          }                   
                      });
                      $(".MomFor").each(function(){
                           if (!$(this).is(':checked') &amp;&amp; $(this).val() == '0') {
                                  var TaskStatus = $(this).parent().next('td').next('td').next('td').find('select');
                                  TaskStatus.attr('disabled', 'disabled'); 
                                  TaskStatus.val("0");    
                                  $(this).parent().next('td').find('select').removeAttr('disabled');
                           }  
                           else if($(this).is(':checked') &amp;&amp; $(this).val() == '1'){
                                  var StaffSelect = $(this).parent().next('td').find('select');                           
                                  StaffSelect.prop('disabled', true).val("");
                                  $(this).parent().next('td').next('td').next('td').find('select').removeAttr('disabled');
  
                           }          
                      });
  
  
                  },
                  "rowCallback": function( row, data, index ) {
                      $('td &gt; input.remove', row).off("click").on("click",function(){
                          MomActivity.row($(this).parents('tr')).remove().draw();
                      });
                      $('td &gt; input.whendate', row).datetimepicker({ format: "DD-MM-YYYY" });
                      $(".selectProjectID", row).on('change', function() {
                          myFunction(jQuery("#"+this.id).val(), this.id);
                      });
                       $(document).on("change", '.MomFor', function() {
                           //alert(this.value);
                              if ( $(this).val() == '0') {
                                  //MyNotif.Show("Allot Thai Gayo Bhai", "success");
                                  //$(".MomFor td:nth-child(4)").html();
                                  //$(this).parent().next('td').next('td').next('td').find('select').attr('disabled', 'disabled');
                                  var TaskStatus = $(this).parent().next('td').next('td').next('td').find('select');
                                  TaskStatus.attr('disabled', 'disabled'); 
                                  TaskStatus.val("0");    
                                  $(this).parent().next('td').find('select').removeAttr('disabled');
                                   //$(this).parent().nextAll('td:2').css("background-color", "yellow");
                              }
                              else if ( $(this).val() == '1') {
                                  //$(this).parent().next('td').find('select').attr('disabled', 'disabled');
                                  var StaffSelect = $(this).parent().next('td').find('select');                           
                                  StaffSelect.prop('disabled', true).val("");
                                  $(this).parent().next('td').next('td').next('td').find('select').removeAttr('disabled');
                                  //$(this).parent().next('td').find('select').attr('disabled', 'disabled');
                              }
                       });
                       $()
                  },
                  "fnCreatedRow": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
                      a = a + 1;
                      b = b + 1;
                      c = c + 1;
                      d = d + 1;
                      e = e + 1;
                  }           
              });  
  </code></pre>
  
  <p>I get the correct console. It shows <code>Who_0, 3, Who_1, 0</code>. I want to display the name associated with value 3 as selected. Similarly with status. 
  I can see this in inspect element:</p>
  
  <pre><code>&lt;select id="Who_0" class="form-control selectWho" name="Who_0" valueid="3"&gt;&lt;/select&gt;
  &lt;select id="Who_1" class="form-control selectWho" name="Who_1" valueid="0"&gt;&lt;/select&gt;
  
  &lt;select class="form-control status" valueid="0" name="Status_0"&gt;&lt;/select&gt;
  &lt;select class="form-control status" valueid="3" name="Status_1"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>This is the generated select:</p>
  
  <pre><code>&lt;select id="Who_0" class="form-control selectWho" name="Who_0" valueid="3"&gt;
     &lt;option value="0"&gt;---Select---&lt;/option&gt;
  &lt;option value="3"&gt;Yogeshwaran&lt;/option&gt;
  &lt;option value="1"&gt;Samyuktha&lt;/option&gt;
  &lt;option value="0"&gt;---Select---&lt;/option&gt;
  
  &lt;/select&gt;
  </code></pre>
  
  <p>I've also shown the generated select dropdown. This is generated dynamically.</p>
  
  <p>But I don't know why is it not showing the selected value? So, how to show the selected value? What should I add or change?</p>