Question

我正在开发一个MVC应用程序。我正在尝试在组合框运行时添加项目。

请检查图像

enter image description here

如图所示，每次点击“添加产品”时，我都会添加新的div。现在，问题是，当我点击添加产品链接时，旧的组合中先前选择的项目将被重置。它会自动设置第一项。

我在视图中有以下代码。

  <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>

代码有什么问题？

Answer 1

尝试此代码并确保包含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>

Answer 2

因为您要替换select这里的整个html内容

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

您可以使用ajax调用返回单个选项，并将该选项附加到此选择列表。

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

如何在MVC视图中使用jquery将数据绑定到组合框运行时？

2 个答案: