Binding the selected value to dynamically created dropdown jQuery
<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>