CODEWITHSUNDEEP
c#javascriptjqueryasp.net
SamuraiJack
SamuraiJack

Reputation: 5539

How to fill a DropDownList which is being Dynamically added on ClientSide?

I am trying to create a DataEntry Grid/table like structure in which user appends new row on button click . The row will have TextBoxes, DropDown, Calendar Control. All of this is supposed to be done on client side. So far I have this and as you can see I am trying to fill DropDownusing var data object (which is not working).. what I need your help with is filling the DropDown from database. How Am I suppose to do this?

CODE (UPDATED):

    <script src="js/jquery-1.11.0.js" type="text/javascript"></script>

<table id="field">
    <tr>
        <td>Alternatif <span class='num'>1</span></td>
        <td><input type="text" /></td>
        <td><select id="myDropDownLisTId"> <input type="text" id="datepicker"></select></td>
    </tr>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>

<script id="template" type="text/template">
<tr>
    <td class="number">Alternatif</td>
    <td><input type="text" /></td>
     <td><select id="myDropDownLisTId"> <input type="text" id="datepicker"></td>

</tr>
</script>
 <script type="text/javascript">
     $(document).ready(function () {

         $("#addField").click(function (event) {
             $($("#template").html()).appendTo($("#field tbody")).show("slow");
             if ($("td").hasClass("number")) {
                 var i = parseInt($(".num:last").text()) + 1;
                 $($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number');
             }
             event.preventDefault();
         });

         $("#deleteField").click(function (event) {
             var lengthRow = $("#field tbody tr").length;
             if (lengthRow > 1)
                 $("#field tbody tr:last").remove();
             event.preventDefault();
         });

     });

     var data = [
    { id: '0', name: 'test 0' },
    { id: '1', name: 'test 1' },
    { id: '2', name: 'test 2' },
    { id: '3', name: 'test 3' },
    { id: '4', name: 'test 4' },
];


     for (i = 0; i < data.length; i++) {

         $("#myDropDownLisTId").append(
        $('<option />', {
            'value': data[i].id,
            'name': data[i].name,
            'text': data[i].name
        })
                );

     }

    </script>

I am now able to fill the first DropDown with the hardcoded var data but rest of the dynamically generated DropDowns are always empty

Upvotes: 1

Views: 1221

Answers (2)

Jero
Jero

Reputation: 61

 var data = [
    { id: '0', name: 'test 0' },
    { id: '1', name: 'test 1' },
    { id: '2', name: 'test 2' },
    { id: '3', name: 'test 3' },
    { id: '4', name: 'test 4' },
];


var li="";

for(int i=0;i<data.length;i++)
{
li +='<li>'+data.id+'</li>'
}


$('selector').append(li){
//...
}

Upvotes: 1

Jalpesh Vadgama
Jalpesh Vadgama

Reputation: 14216

I think best way to bind that dropdown is from client side. So create a web service or web api that will fetch data for that dropdown and then with jquery Ajax call get data from server side and fill that dropdown.

Another method is to create webmethod for fetching data. You can find more information about that in following link.

http://www.aspsnippets.com/Articles/Populate-Bind-DropDownList-using-JavaScript-and-ASP.Net-AJAX.aspx

Upvotes: 1

Related Questions