引导下拉菜单无法选择下拉菜单选项答案

【问题标题】：bootstrap dropdown can't select dropdown menu option引导下拉菜单无法选择下拉菜单选项
【发布时间】：2023-03-31 15:15:01
【问题描述】：

所以我有一个引导下拉菜单，但我似乎无法选择任何选项，而是将我带到页面顶部。例如，在菜单内部，我有一个 id=AOSdropdown 的下拉菜单，当用户选择一个选项并且该选项反映在框中，加上 id=AOSdropdown 的文档将具有所选选项的值。因此，当我调用我的 JavaScript 以通过 id 获取文档并获取它的值时，我有一些东西而不仅仅是一个空值。我做了一些研究，发现可能需要一些 jquery，但我不完全了解如何使用 jquery 并将其应用于我的问题以解决它。一如既往，我们将不胜感激。

html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sign Up </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, intial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/formStyle.css">
  </head>
  <body>
    <div class="container">
            <div class="row main">
                <div class="panel-heading">
                   <div class="panel-title text-center">
                      <h1 class="title">Welcome</h1>
                      <hr />
                   </div>
                </div>
          <div class="main-login main-center">
            <form class="form-horizontal" onsubmit="return signupValidator();" method="post" action="#">
              <div class="form-group">
                <label for="firstname" class="cols-sm-2 control-label">Firstname:</label>
                <div class="cols-sm-10">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user fa " aria-hidden="true"></i></span>
                    <input type="text" class="form-control" id="firstname"  placeholder="Enter your firstname"/>
                  </div>
                    <div id="fname_error"></div>
                </div>
              </div>

              <div class="form-group">
                <label for="lastname" class="cols-sm-2 control-label">Lastame:</label>
                <div class="cols-sm-10">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                    <input type="text" class="form-control" id="lastname"  placeholder="Enter your Name"/>
                  </div>
                    <div id="lname_error"></div>
                </div>
              </div>

              <div class="form-group">
                <label for="username" class="cols-sm-2 control-label">Username:</label>
                <div class="cols-sm-10">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                    <input type="text" class="form-control" id="username"  placeholder="Enter your Username"/>
                  </div>
                    <div id="uname_error"></div>
                </div>
              </div>

                <div class="form-group">
                    <label for="email" class="cols-sm-2 control-label">Your Email</label>
                    <div class="cols-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                            <input type="text" class="form-control" id="email"  placeholder="Enter your Email"/>
                        </div>
                        <div id="email_error"></div>
                    </div>
                </div>

              <div class="form-group">
                <label for="password" class="cols-sm-2 control-label">Password</label>
                <div class="cols-sm-10">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                    <input type="password" class="form-control" id="password"  placeholder="Enter your Password"/>
                  </div>
                </div>
                  <div id="pass_error"></div>
              </div>

              <div class="form-group">
                <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
                <div class="cols-sm-10">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                    <input type="password" class="form-control" id="passconfirm"  placeholder="Confirm your Password"/>
                  </div>
                    <div id="passconfirm_error"></div>
                </div>
              </div>
                <!--The dropdown that is giving me the problem-->
              <div class="form-group">
                  <label for="Area Of Study" class="col-sm-10 control-label" id="AOS">Select Your Area Of Study</label>
                  <div class="col-sm-10">
                      <div class="dropdown">
                          <button class="btn btn-default dropdown-toggle" href="#" type="button" id="AOSdropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              Area Of Study
                              <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu" role="menu" aria-labelledby="AOSdropdown">
                              <li ><a href="#">Computing </a></li>
                              <li><a href="#">Physics</a></li>
                          </ul>
                      </div>
                      <div id="AOS_error"></div>
                  </div>
              </div>
                <!--dropdown code ends here-->
              <div class="form-group ">
                <button type="submit" class="btn btn-primary btn-lg btn-block login-button">Register</button>
              </div>
              <div class="login-register">
                      <a id="signinLink"href="signIn.html">Login</a>
                   </div>
            </form>
          </div>
        </div>
    </div>
    <script type="text/javascript" src="js/formValidator.js"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
  </body>

</html>

css代码

body, html{
     height: 100%;
    background-repeat: no-repeat;
    background-color:#00ffcc; /*#00ffbf*/
    font-family: 'Oxygen', sans-serif;
}

.main{
    margin-top: 70px;
    margin-bottom: 50px;
}

h1.title {
    font-size: 50px;
    font-family: 'Tahoma', cursive;
    font-weight: 400;
    color:white;
}

hr{
    width: 70%;
    color: #fff;
    border-width: medium;
}

.form-group{
    margin-bottom: 15px;
}

label{
    margin-bottom: 15px;
}
#AOS{
    margin-left: -5%;
}
#AOSdropdown{
    margin-left: -20px;
    width: 100%;
    color:#555;
}
#signupLink{
    float: right;
    font-size: medium;
}
#signinLink{
    font-size: medium;
}
.dropdown{
    width:140%;
}
input,
input::-webkit-input-placeholder {
    font-size: 11px;
    padding-top: 3px;
}

.main-login{
    background-color: #fff;
    /* shadows and rounded borders */
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}

.main-center{
    margin-top: 30px;
    margin: 0 auto;
    max-width: 330px;
    padding: 40px 40px;

}

.login-button{
    margin-top: 5px;
}

.login-register{
    font-size: 11px;
    text-align: center;
}
@media screen and (max-width: 720px){
    .dropdown{
        width:115%;
    }
}

@media screen and (min-width: 720px){
    #AOS{
        margin-left: -15%;
        margin-bottom: 14px;
    }
}

JavaScript 代码

var fnameregex = /^[a-z -]+$/i;
var lnameregex = /^[a-z'-]+$/i;
var usernameregex = /^[a-z0-9_'-]+$/i;
var emailregex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var passregex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.{8,})");
var submit=true;

function signupValidator(){
    if(document.getElementById('firstname').value == "" || fnameregex.test(document.getElementById('firstname').value)== false) {
        document.getElementById('fname_error').innerHTML="Please provide a valid name";
        submit=false;
    }
    if (document.getElementById('lastname').value == "" || lnameregex.test(document.getElementById('lastname').value)== false){
        document.getElementById('lname_error').innerHTML="Please provide a valid name";
        submit=false;
    }
    if (document.getElementById('username').value == ""){
        document.getElementById('uname_error').innerHTML="Please provide a username";
        submit=false;
    }
    if(document.getElementById('username').value!= "" && usernameregex.test(document.getElementById('username').value)== false){
        document.getElementById('uname_error').innerHTML="Usernames can only contain letters, numbers, hyphens, underscores and apostrophes"
    }
    if (document.getElementById('email').value == "" || emailregex.test(document.getElementById('email').value)== false){
        document.getElementById('email_error').innerHTML="Please provide a valid email address";
        submit=false;
    }
    if (document.getElementById('password').value == ""){
        document.getElementById('pass_error').innerHTML="Please provide a password";
        submit=false;
    }
    if(passregex.test(document.getElementById('password').value)== false){
        document.getElementById('pass_error').innerHTML="Passwords must be eight characters or more contain one uppercase, one numeric number and one lowercase."
        submit= false;
    }
    if (document.getElementById('passconfirm').value == ""){
        document.getElementById('passconfirm_error').innerHTML="Please re-enter your password again";
        submit= false;
    }
    if (passregex.test(document.getElementById('passconfirm').value)== false){
        document.getElementById('passconfirm_error').innerHTML="Passwords must be eight characters or more contain one uppercase, one numeric number and one lowercase."
        submit=false;
    }
    if (document.getElementById('password').value != document.getElementById('passconfirm').value){
        document.getElementById('passconfirm_error').innerHTML="Ensure that your passwords match";
        submit=false;
    }
    if(document.getElementById('AOSdropdown').value == ""){
        document.getElementById('AOS_error').innerHTML="Please select a area of study";
        submit=false;
    }

    return submit;
}

【问题讨论】：

抛开问题不谈，你真的应该考虑使用像 jQuery Validate 这样的东西......会让你的生活变得更轻松，同时也为边缘情况等提供更好的支持：jqueryvalidation.org

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

听起来您只是缺少下拉菜单中项目的点击处理程序。单击菜单项时页面滚动到顶部的事实是因为它们有href="#"，它只是一个空占位符。

以下是如何从当前下拉列表中获取值的基本思路：

HTML

<ul class="dropdown-menu" role="menu" aria-labelledby="AOSdropdown">
  <li><a class="js-aos-dropdown" href="#">Computing</a></li>
  <li><a class="js-aos-dropdown" href="#">Physics</a></li>
</ul>

JS (jQuery)

var aos = '';
$('.js-aos-dropdown').click(function(event) {
  event.preventDefault(); // Prevents scrolling to top of page
  aos = $(this).text();   // Get the text value of the thing that was clicked
})

这将创建一个名为 aos 的空变量，然后将您单击的任何一个文本值分配为新值。

使用<select> 菜单来选择成为表单数据一部分的选项在语义上会更正确。

更简单、语义更正确的版本

HTML

<select id="js-aos-dropdown">
  <option>Computing</option>
  <option>Physics</option>
</select>

JS (jQuery)

var aos = '';
$('#js-aos-dropdown').change(function(event) {
  aos = event.target.value;
})

【讨论】：

非常感谢您的帮助，我非常感谢您的帮助，您的解决方案对我有很大帮助，我也会考虑您提出的更改。