How to add drop down list in every row of dynamic table which fetch data from server?

Question

I want to add static drop downlist to every row of dynamic table which fetch the data from server, How I will do this?
I want to make same like this,(please check drop downlist type) but it will also fetch data from server and every row of column will have drop drownlist.

Following is updated and working code, thanks to @angu

Structure of drop down list.

    <select >       
        <option value="1">NewJob</option>
        <option value="2">InProgress</option>
        <option value="3">CloseJon</option>
    </select>

Dynamic Table

    <div class="span9" id="content">        
        <div class="row-fluid">
            <div class="block">
                <div class="navbar navbar-inner block-header">
                    <div class="muted pull-left">Carpenter Services</div>
                </div>
                <div class="block-content collapse in">
                    <div class="span12">
                         <table class="data-contacts1-js table table-striped" >
                              <thead>
                                <tr>
                                      <th>ID</th>
                                      <th>Customer Name</th>
                                      <th>Customer Mobile</th>
                                      <th>Customer Email</th>                                                                             
                                </tr>
                              </thead>
                          <tbody>

                          </tbody>
                        </table>                                    
                   </div>


    <button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>                          
                </div>
            </div>
            <!-- /block -->
        </div>

JavaScript

<script>
             function fetchData1(){                          
                $(".data-contacts1-js tbody").empty();
                $.get("http://localhost/service/Services.php", function(data) {                    
                   var obj=JSON.parse(data);                       
                   for(var i in data){
                     var tr=$("<tr></tr>");
                     tr.append(
                            "<td>" + obj[i].b_id + "</td>" +
                            "<td>" + obj[i].cust_name + "</td>" +                           
                            "<td>" + obj[i].cust_mobile + "</td>" +                           
                            "<td>" + obj[i].cust_email + "</td>"
                        );
                    tr.append("<select class='input-small'><option value='New Job'>NewJob</option><option value='WIPJob'>WIP Job</option></select>");
                     $(".data-contacts1-js tbody").append(tr);
                     i++;
                   }
                });
            }  

             $(document).ready(function(){
                  $(".data-contacts1-js tbody").empty();
                $('#fetchContacts1').click(function() {
                     fetchData1();
                });
            });
        </script>

Answer 1

Here are couple createSelect functions that could work in your case. Plain JavaScript is used in those functions :-)

$("body").append("createSelect() ");
$("body").append("<br>");
$("body").append(createSelect());
$("body").append("<br><br><br>");
$("body").append(" createSelectDynamic() ");
$("body").append("<br>");
var array = [{
    "value": 1,
    "text": "NewJob"
}, {
    "value": 2,
    "text": "InProgress"
}, {
    "value": 3,
    "text": "CloseJob"
}]
$("body").append(createSelectDynamic(array));

$("body").append("<br><br><br>");
$("body").append("miniTable where createSelect() used ")

$("body").append("<table><tr><td><td>2nd<td>third");
var select = createSelect();
$("td:first-child").append(select);


function createSelect() {
    var select = document.createElement("select");

    var option = document.createElement("option");
    option.value = 1;
    option.text = "NewJob";
    select.add(option);

    var option2 = document.createElement("option");
    option2.value = 2;
    option2.text = "InProgress";
    select.add(option2);

    var option3 = document.createElement("option");
    option3.value = 3;
    option3.text = "CloseJob";
    select.add(option3);

    return select;
}

function createSelectDynamic(values) {

    var select = document.createElement("select");

    for (i = 0; i < values.length; i++) {
        var option = document.createElement("option");
        option.value = values[i].value;
        option.text = values[i].text;
        select.add(option);
    }

    return select;
}

table, th, td {
   border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

use it. i think this is helpful for you

Jquery Code Generate Dynamic append Row:

$(function(){

    for(var i=0;i<3;i++){
       var trd="";
    trd +="<tr>";
    trd +="<td>";
    trd+="<select class='input-small'><option value=''>Type</option><option value=''>Type1</option></select>";
    trd+="</td>";
    trd+="<td><input type='text'> </td>";
    trd+="<td><input type='text'> </td>";
    trd+="</tr>";
         $(".table-bordered tbody").append(trd); 
    }



});

Click To Demo