Question

我搜索了很多我的问题，但找不到合适的解决方案。我有一个JavaScript代码，它有html select语句我想从后面的代码中添加选项

JavaScript功能

function addMoreRows()
{
        rowCount++;
        var recRow = "";
        recRow += '<tr id="rowCount' + rowCount + '">';
        recRow += '<td style="margin: 0px; padding: 0px;">';
        recRow += '<select style="height: 25px; border:0; width:250px; margin: 0px; padding: 0px;" id="ddl_grid_productList" onchange="addrowswithselect()" data-placeholder="Choose a State...">';

        <%=options%>

        recRow += '</select>';
        recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
        recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="field_one" class="col-xs-10 col-sm-12" />';
        recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
        recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="Qty' + rowCount + '" onchange="add(' + rowCount + ')" class="col-xs-10 col-sm-12" />';
        recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
        recRow += '<input type="text" id="Rate' + rowCount + '" onchange="add(' + rowCount + ')" style="height: 25px;border:0px; margin: 0px; padding: 0px" class="col-xs-10 col-sm-12" />';
        recRow += '</td><td class="hidden-480" style="height: 25px; margin: 0px; padding: 0px">';
        recRow += '<input id="total' + rowCount + '" type="text" onblur="totalamout(),addrows(this.value);" style="height: 25px;border:0px; padding: 0px; margin: 0px;" class="col-xs-10 col-sm-12" readonly />';
        recRow += '</td></tr>';
        jQuery('#<%=tbdy_addedRows.ClientID%>').append(recRow); 
    }

Aspx CodeBehind

    public string options;
    var pro = (from m in db.products select m).ToList();
    foreach (var item in pro)
            {
                ListItem list = new ListItem();
                list.Value = item.code.Trim();
                list.Text = item.name.Trim();
                options += "recRow += '<option value=\"" + item.code.Trim() + "\">" + item.name.Trim() + "</option>';\n";
            }

有没有任何标准方法可以做到这一点，因为源视图显示选项正确获取但JavaScript无法正常工作。

Answer 1

在代码隐藏文件中创建一个[WebMethod]，它会构建一个选择选项列表，并使用$.ajax从javascript调用它。

代码背后：

[System.Web.Services.WebMethod]
public static string GetOptions()
{
    string options = "<option value='Option1'>Option 1</option><option value='Option2'>Option 2</option>"; 
    return options;
}

<强> .ASPX：

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            var rowCount = 0;

            $("#btnAddRow").click(function () {
                $.ajax({
                    type: "POST",
                    url: "AddRowsInJquery.aspx/GetOptions",
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        var options = data.d;
                        addMoreRows(options);
                    },
                    error: function (errordata) {
                        alert(errordata);
                    }
                });
            });

            function addMoreRows(options) {
                rowCount++;
                var recRow = "";
                recRow += '<tr id="rowCount' + rowCount + '">';
                recRow += '<td style="margin: 0px; padding: 0px;">';
                recRow += '<select style="height: 25px; border:0; width:250px; margin: 0px; padding: 0px;" id="ddl_grid_productList" onchange="addrowswithselect()" data-placeholder="Choose a State...">';
                recRow += options;
                recRow += '</select>';
                recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
                recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="field_one" class="col-xs-10 col-sm-12" />';
                recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
                recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="Qty' + rowCount + '" onchange="add(' + rowCount + ')" class="col-xs-10 col-sm-12" />';
                recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
                recRow += '<input type="text" id="Rate' + rowCount + '" onchange="add(' + rowCount + ')" style="height: 25px;border:0px; margin: 0px; padding: 0px" class="col-xs-10 col-sm-12" />';
                recRow += '</td><td class="hidden-480" style="height: 25px; margin: 0px; padding: 0px">';
                recRow += '<input id="total' + rowCount + '" type="text" onblur="totalamout(),addrows(this.value);" style="height: 25px;border:0px; padding: 0px; margin: 0px;" class="col-xs-10 col-sm-12" readonly />';
                recRow += '</td></tr>';
                jQuery('#<%: Table1.ClientID%>').append(recRow);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" value="Add Row" id="btnAddRow" />
        <asp:Table ID="Table1" runat="server">
            <asp:TableHeaderRow>
                <asp:TableCell>Column 1</asp:TableCell>
                <asp:TableCell>Column 2</asp:TableCell>
                <asp:TableCell>Column 3</asp:TableCell>
                <asp:TableCell>Column 4</asp:TableCell>
                <asp:TableCell>Column 5</asp:TableCell>
            </asp:TableHeaderRow>
        </asp:Table>
    </form>
</body>

Answer 2

审核您的问题后。我可以建议使用unbind＆amp;绑定事件以进行动态控制。它将再次绑定您的事件，并且您的动态控件的事件将会触发。

$("#mycontrol").bind("click", (function () {
	$('span').text(" Clicked");
}));

动态创建的JavaScript代码背后没有工作的JavaScript

2 个答案: