How to bind data to combo box run time using jquery in MVC view ?

Question

I am developing an MVC application. I am trying to add the items in the combo box runtime.

Please check the image

enter image description here

AS seen in the picture, I add new div every time when I click on Add Product. Now, the problem is, when I click on Add Product Link, previously selected item in the older combos get reset. It automatically set first item.

I have following code in view.

  <html>
        <body>


               <div class="span11 roundedDiv" style="margin-bottom : 20px; background-color:whitesmoke;">
                        <div class="row-fluid">
                        <div class="span2" style="margin-right:10px;">
                            Section Name
                        </div>
                        <div class="span2"  style="margin-right:10px;">
                           Section Code
                        </div>

                    </div>

                 <div class="row-fluid" id="ProductList">


                              <span style='font-size: 12px;margin-left:0px;'><select class='clsProductId span11'  id='ddProductList'name='ProductId' style='font-size:12px;width:120px;margin-right:3px;margin-left:0px;'>
                              <option selected="selected" value=""></option>
                              </select></span>

                            <input type="text" id="SectionCode" style="width:10%; margin-right:30px;" />



                    </div>


                 <div class="span10" style="margin-left:0px;">
                       <a href="#" id="lnkAddProduct" style="font-size:14px;text-decoration:none;margin-right:10px;">Add Product</a>
                       <span id="LinkErrorMsg" class="field-validation-error"></span>
                   </div>
               </div>
            </body>
    </html>




          <script type="text/javascript">


               $(document).ready(function() {



               });

               $('#lnkAddProduct').click(function (index) {
                   getProductList();

                   $('#ProductList').append("<div><span style='font-size:12px;'><select class='clsProductId' id='ddProductList'name='ProductId' style = 'font-size:12px;width:120px;margin-right:10px;margin-left:0px;' /></span><input type='text' id='SectionCode' style='width:10%; margin-right:30px;'></div>");

               });




               $(document).ready(function () {
                              getProductList();
               });

                   function getProductList() {


                       alert("In Product list");
                       var productList;
                       var mainList;
                       var productListArray = [];



                       $.ajax({
                           url: '@Url.Content("~/Product/GetProductList")',
                       success: function (data) {

                           //alert("In Getting data");
                           mainList = data;
                           var options = '';
                           temp = 0;
                           for (var index = 0; index < data.length; index++) {

                               productListArray[index] = data[index].Id;
                               options += '<option value="' + data[index].Id + '">' + data[index].Name + '</option>';
                           }
                           productList = options;

                           $("select#ddProductList").html(productList);
                       }
                      });
                   }


        </script>

Whats wrong with code ?

Muthu R · Accepted Answer · 2014-03-01 11:11:39Z

try this code and make sure you included jQuery.js.

    <div class="span11 roundedDiv" style="margin-bottom : 20px; background-color:whitesmoke;">
        <div class="row-fluid">
            <div class="span2" style="margin-right:10px;">
                Section Name
            </div>
            <div class="span2" style="margin-right:10px;">
                Section Code
            </div>

        </div>

        <div class="row-fluid" id="ProductList">


            <span style='font-size: 12px;margin-left:0px;'>
                <select class='clsProductId span11' id='ddProductList_0' name='ProductId' style='font-size:12px;width:120px;margin-right:3px;margin-left:0px;'>
                    <option selected="selected" value=""></option>
                </select>
            </span>

            <input type="text" id="SectionCode" style="width:10%; margin-right:30px;" />



        </div>


        <div class="span10" style="margin-left:0px;">
            <a href="#" id="lnkAddProduct" style="font-size:14px;text-decoration:none;margin-right:10px;">Add Product</a>
            <span id="LinkErrorMsg" class="field-validation-error"></span>
        </div>
    </div>
</body>
</html>




<script type="text/javascript">


    $(document).ready(function () {


        function getProductList(rIndex) {


            alert("In Product list");
            var productList;
            var mainList;
            var productListArray = [];


            $.ajax({
                url: '@Url.Content("~/Product/GetProductList")',
                success: function(data) {

                    //alert("In Getting data");
                    mainList = data;
                    var options = '';
                    temp = 0;
                    for (var index = 0; index < data.length; index++) {

                        productListArray[index] = data[index].Id;
                        options += '<option value="' + data[index].Id + '">' + data[index].Name + '</option>';
                    }
                    productList = options;

                    $("select#ddProductList_" + rIndex).html(productList);
                }
            });
        }

        $('#lnkAddProduct').click(function () {

            var rIndex = $("select.clsProductId").length;

            $('#ProductList').append("<div><span style='font-size:12px;'><select class='clsProductId' id='ddProductList_" + rIndex + "' name='ProductId' style = 'font-size:12px;width:120px;margin-right:10px;margin-left:0px;' /></span><input type='text' id='SectionCode' style='width:10%; margin-right:30px;'></div>");

            getProductList(rIndex);
        });

        getProductList(0);
    });

</script>

Nitin Varpe · Accepted Answer · 2014-03-01 11:01:38Z

0

Because you are replacing whole html content of select here

$("select#ddProductList").html(productList);

You can just return single option using ajax call and append that option to this select list.

('<option value="'+data.Id+'">'+data.Name+'</option>').appendTo("select#ddProductList");

answered Mar 1, 2014 at 11:01

Nitin Varpe

10.7k6 gold badges42 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to bind data to combo box run time using jquery in MVC view ?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related