Question

我希望我的用户在文本框字段中输入其登录名，并在其下方显示一个单选按钮列表，其中包含与用户名关联的患者组。但是，我似乎只能使Viewbag中的第一个项目起作用。下面是我正在使用的js。

<script>

        var check = function () {          

                 if (document.getElementById('Username').value ==    
                     document.getElementById('projects').getAttribute("name")) 
                 {    
                         var userName = document.getElementById('Username').value;    
                         document.getElementsByName(userName)[0].style.display = 'table-row';    
                 } 
                 else 
                 {
                     document.getElementById('projects').style.display = 'none';    
                 }    
         }    
        </script>

这是尸体：

<div class="row">    
    <div class="col-md-8">    
        <form asp-action="SubmitAttempt" method="post">    
            <div class="form-group">    
                <label name="Username" class="control-label">Enter Username</label>    
                <input name="Username" id="Username" class="form-control" required onkeyup="check();"/>    
            </div>    
           <div class="form-group">    
                <label name="Email" class="control-label">Enter Email Address</label>    
                <input name="Email" class="form-control" required />    
            </div>    
            <table border="1" style="margin: 5px">    
                @if (ViewBag.Subs != null)    
                {    
                    foreach (var subs in ViewBag.Subs)    
                    {    
                    <tr id="projects" name="@subs.Username" style="display:none" value="@subs.Username">    
                        <td><input type="radio" value="@subs.PatientName" name="PatientName" class="form-control"/></td>    
                        <td>@subs.ProjectName</td>    
                        <td>&nbsp;</td>    
                        <td>@subs.PatientSet</td>    
                    </tr>    
                    }    
                }    
            </table>    
            <div>    
                <p>Click Submit</p>    
            </div>    
            <input type="submit" value="Submit" class="btn btn-primary" />    
        </form>    
    </div>    
</div>

我应该在我的js中使用一个循环来检查每个tr并与文本输入进行比较吗？

Answer 1

我应该在我的js中使用一个循环来检查每个tr并与文本输入进行比较吗？

是的，您需要使用循环逐一比较。

此外，您的代码中还存在一些错误，我建议不要使用Id选择器，因为有很多具有相同ID的trs，因此在使用Id选择器时它将始终选择第一个。

我进行了一些更改，您可以参考以下代码：

<table border="1" style="margin: 5px">
    @if (ViewBag.Subs != null)
    {
        foreach (var subs in ViewBag.Subs)
        {
            <tr id="projects" name="subsName" style="display:none" value="@subs.UserName">
                <td><input type="radio" value="@subs.PatientName" name="PatientName" class="form-control" /></td>
                <td>@subs.ProjectName</td>
                <td>&nbsp;</td>
                <td>@subs.PatientSet</td>
            </tr>

        }
    }
</table>


<script>

    var check = function () {
        var userName = document.getElementById('Username').value;
        var trs = document.getElementsByName('subsName');
        for (var i = 0; i < trs.length; i++) {
            if (userName == trs[i].getAttribute("value")) {
                trs[i].style.display = 'table-row';
            }
            else {
                trs[i].style.display = 'none';
            }
        }
    }
</script>

基于文本框键盘隐藏/取消隐藏viewbag项的Javascript

1 个答案: