在JS中获取循环表行中的下拉列表的值

时间：2016-02-20 08:40:26

标签： javascript jquery asp.net drop-down-menu

我正在创建一个网格表，用户可以在其中添加应用程序或删除他们需要的应用程序。用于重置的应用程序需要选择是否从下拉列表中重置（登录，覆盖或登录并覆盖），除了重置类型之外，用户还应输入用户ID。

我的问题是，我的网格行是循环的，所以我的下拉列表有一个id和一个类，而我的userid的文本框也是如此。我可以使用document.getElementsByName将输入的文本保存在userid文本框中。但是，我无法在下拉列表中获取所有选定的值，我只获得第一行中下拉列表的值。

image of the grid table

这是我的dropdownList代码：

public string GetResettingList()
{
    StringBuilder html = new StringBuilder();



    try
    {
        //select action
        html.Append("<table style=\"width:24% !important;\">");
        html.Append("<tr>");
        html.Append("<td style=\"text-align:left;\"><select id=\"ddlreset\" style=\"width:150px;\" onchange=\"\"><option value=\"\">--Please Select--</option>");

        var sAction = _DataEntryBLL.showResettingList();
        foreach (var r in sAction)
        {
            html.Append("<option value=\"" + r.resetCode + "\">" + r.resetDesc.ToString() + "</option>");
        }
        html.Append("</table>");
    }
    catch (Exception ex)
    {
        html.Clear();
        html.Append("Error found." + ex.Message);
    }

    return html.ToString();
}

这是我在ASP.NET中的代码：

try
{
    ShowList = _DataEntryBLL.showBranchSingleRequest(position);
    if (ShowList.Count() > 0)
    {
        foreach (var app in ShowList)
        {
            //content = "content=\"" + app.ApplicationID + ";" + app.ApplicationDesc + ";" + app.Applicationshortname + "\"";
            html.Append("<tr>");
            if (prevAppId != app.applicationid)
            {
                html.Append("<td width=\"5%\"><input type=\"checkbox\" name =\"chkapp\" class=\"check-app\" id = \"chkapp" + app.applicationid + "\"  value=\"" + app.applicationid + "\">");
                html.Append("<td colspan=\"1\" class=\"\" style=\"background-color:#EEE\"><b>" + app.applicationDesc.ToString() + "<input type=\"hidden\" id=\"hdnbranchappid\" value=\"" + app.applicationid + "\"></td>");
                //html.Append("<td ></td><td ></td>");
                html.Append("<td  id=\"tdDdlreset\" class=\"reset-type\" style=\"background-color:#EEE\">" + GetResettingList() + "<input type=\"text\" id=\"hdnDdlresetvalue\"></td>");
                html.Append("<td width=\"40%\" class=\"\" style=\"background-color:#EEE\"><input type=\"text\" id=\"UserAppID\"><input type=\"hidden\" id=\"hdnbranchprofid\" value=\"" + app.profileID + "\"></td></tr>");
            }
            html.Append("<tr><td ></td> <td ></td><td ></td>");
            html.Append("</tr>");
            prevAppId = app.applicationid;
        }
    }
    else
    {
        html.Append("<tr>");
        html.Append("<td colspan=\"3\" align=\"center\"> No Records found.</td>");
        html.Append("</tr>");
    }
    html.Append("</table>");
    html.Append("<div  style=\"padding-top:1%;\"><input type=\"button\"    class=\"btnDeleteApplication\" value=\"Delete Application/s \"> <input type=\"hidden\" id=\"\"></div>");
    html.Append("</div>");
}

这是我在JS中的代码

function SaveResettingBranchRequest() {
    var input = "";
    var branchuserid = document.getElementsByName("UserAppID");
    var branchApp = document.getElementsByName("hdnbranchappid");

   //dropdown reset
   var resetType = document.getElementById("ddlreset");
   var reset = resetType.options[resetType.selectedIndex].value;

    for (var i = 1; i < branchApp.length; i++) {
        input += branchApp[i].value + ":" + branchuserid[i].value + ":" +reset[i].value + "|";
    }
    //Call ajax here...
}

如果我选择3个应用程序：

  • 从下拉列表中重置登录类型的网络和用户ID P123405
  • as400，从下拉列表和userid 22089
    • 重置覆盖类型
  • 重置登录类型并从下拉列表和用户ID 203412覆盖的股票

我应该得到以下内容：

network | sign on              | P123405
as400   | override             | 22089
Stock   | sign on and override | 203412

但我得到的是第一行的价值，即网络应用。

请帮助我尝试了我在网上找到的所有内容，但它只获得了第一行。

已编辑.--我忘记了下拉列表。

谢谢，

1 个答案:

答案 0 :(得分：0)

需要纠正的一些问题：

  • 第一个td标记（带复选框）未关闭;
  • 第二个b中的td标记未关闭;
  • 循环生成多个具有相同 id 属性值的元素（也用于下拉列表）; HTML中不允许这样做 - 更改为 name 属性，允许重复;
  • 两次使用 getElementsByName （好！），但将 id 值作为参数传递，而不是名称。但是，如果您修复了上一点，并将HTML id 属性更改为 name 属性，则此代码应该有效;
  • 要检索select元素，您还应该使用 getElementsByName ，这在您完成上述更改后应该有效;
  • 要检索select元素的选定值，您只需使用其value属性;您无需转到选项集合;
  • 应在循环内检索所选值，以便区分不同的select元素;
  • JavaScript循环以索引1开头，但应从0开始。

以下是HTML生成行的行，应该获得 name 属性而不是 id ;第一个来自 GetRessetingList ：

html.Append("<td style=\"text-align:left;\"><select id=\"ddlreset\" style=\"width:150px;\" onchange=\"\"><option value=\"\">--Please Select--</option>");


html.Append("<td width=\"5%\"><input type=\"checkbox\" name =\"chkapp\" class=\"check-app\" id = \"chkapp" + app.applicationid + "\"  value=\"" + app.applicationid + "\">");
html.Append("<td colspan=\"1\" class=\"\" style=\"background-color:#EEE\"><b>" + app.applicationDesc.ToString() + "<input type=\"hidden\" id=\"hdnbranchappid\" value=\"" + app.applicationid + "\"></td>");
//html.Append("<td ></td><td ></td>");
html.Append("<td  id=\"tdDdlreset\" class=\"reset-type\" style=\"background-color:#EEE\">" + GetResettingList() + "<input type=\"text\" id=\"hdnDdlresetvalue\"></td>");
html.Append("<td width=\"40%\" class=\"\" style=\"background-color:#EEE\"><input type=\"text\" id=\"UserAppID\"><input type=\"hidden\" id=\"hdnbranchprofid\" value=\"" + app.profileID + "\"></td></tr>");

某些 id 属性值正常，因为它们包含应用程序ID，但更改其余部分如下：

html.Append("<td style=\"text-align:left;\"><select name=\"ddlresetName\" style=\"width:150px;\" onchange=\"\"><option value=\"\">--Please Select--</option>");

html.Append("<td width=\"5%\">" +
    "<input type=\"checkbox\" name =\"chkapp\" class=\"check-app\"" +
    "id = \"chkapp" + app.applicationid + "\"  value=\"" +
    app.applicationid + "\">");
html.Append("<td colspan=\"1\" class=\"\" style=\"background-color:#EEE\"><b>" +
    app.applicationDesc.ToString() + "</b>" +
    "<input type=\"hidden\" name=\"hdnbranchappName\" value=\"" + 
    app.applicationid + "\"></td>");
//html.Append("<td ></td><td ></td>");
html.Append("<td  name=\"tdDdlreset\" class=\"reset-type\" style=\"background-color:#EEE\">" +
    GetResettingList() +
    "<input type=\"text\" name=\"hdnDdlresetvalueName\"></td>");
html.Append("<td width=\"40%\" class=\"\" style=\"background-color:#EEE\">" + 
    "<input type=\"text\" name=\"UserAppName\">" +
    "<input type=\"hidden\" name=\"hdnbranchprofName\" value=\"" +
    app.profileID + "\"></td></tr>");

完成这些更改后，此JavaScript代码应该会提供更好的结果：

function SaveResettingBranchRequest() {
    var input = "";
    var branchuserid = document.getElementsByName("UserAppName");
    var branchApp = document.getElementsByName("hdnbranchappName");
    //dropdown reset
    var resetType = document.getElementByName("ddlresetName");

    for (var i = 0; i < branchApp.length; i++) {
        input += branchApp[i].value + ":" + 
                 branchuserid[i].value + ":" +
                 resetType[i].value + "|";
    }
    //Call ajax here...
}

说明

您最初提供的代码会发现 branchApp.length 为0（因为没有匹配名称的元素），因此它不会产生任何内容。我猜你通过尝试简化问题来进一步打破代码。

由于您必须将多个 id 属性更改为 name 属性，因此其他一些代码可能会中断。因此，您应检查对这些 id 属性的任何依赖关系，并相应地更改代码。 id 属性仅在您通过其 id 处理这些元素的JavaScript时才有用。在你提供的代码中没有这样的需求。

相关问题
最新问题