为什么此选择表单在 Firefox 中不起作用？答案

【问题标题】：Why does this select form not work in Firefox?为什么此选择表单在 Firefox 中不起作用？
【发布时间】：2015-09-01 05:49:56
【问题描述】：

我的网站上有一个使用 Bootstrap 3 的表单。它在 IE、Chrome 和 Safari 中运行良好，但由于某种原因，表单末尾的下拉选项元素在 Firefox 中不起作用。我尝试过不同的操作系统。所选选项不会“停留”在下拉字段中。谁能给我一个线索？

  <!--------The signup form------->
                <form name="signupform" id="signupform" onsubmit="return false;" class="form-signin">
<div class="form">
                  <div class="form-group">

                    <input id="username" type="text" class="form-control" onblur="checkusername()"
                    onkeyup="restrict('username')" maxlength="16" placeholder="Username">
                    <br>
                    <span id="unamestatus"></span>
<br>
                    <input id="email" type="text" class="form-control" placeholder="Email" onfocus="emptyElement('status')"
                    onkeyup="restrict('email')" maxlength="88">
                   <br>
                    <input id="pass1" type="password" class="form-control" placeholder="Create Password" onfocus="emptyElement('status')"
                    maxlength="100">
                    <br>
                    <input id="pass2" type="password" class="form-control" placeholder="Retype Password" onfocus="emptyElement('status')"
                    maxlength="100">

                  <br>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want">
                    <select id="accounttype" class="form-control"  onfocus="emptyElement('status')"></a>
                      <option value="" disabled selected>
                       Choose Account Type
                      </option>
 <option value="b">
                        I am an artist
                      </option>
                      <option value="a">
                       I am looking for artists
                      </option>
                 </select>

</br>

                  <br>
                  <button id="signupbtn" onclick="signup()" class="btn btn-success pull-right">
                    Create Account
                  </button>
                  <br>
                  <span id="status" style="color: white"></span>
                </form>
                <!--------End of form------->

【问题讨论】：

您是否注意到您没有关闭divs？另外，请注意代码缩进。
我已经关闭了 div。我只是忘了包含该代码。感谢您的来信。

标签： javascript html twitter-bootstrap firefox

【解决方案1】：

您打开了嵌套在无效标记 (a) 内的 select 元素。

在form 结尾之前，您还缺少两个结束div 标记。

另外，disabled 不是 option 标记的有效属性。

正确格式化您的代码可以更容易地找到这些错误

<form name="signupform" id="signupform" onsubmit="return false;" class="form-signin">
    <div class="form">
        <div class="form-group">

            <input id="username" type="text" class="form-control" onblur="checkusername()"
                   onkeyup="restrict('username')" maxlength="16" placeholder="Username">
            <br>
            <span id="unamestatus"></span>
            <br>
            <input id="email" type="text" class="form-control" placeholder="Email" onfocus="emptyElement('status')"
                   onkeyup="restrict('email')" maxlength="88">
            <br>
            <input id="pass1" type="password" class="form-control" placeholder="Create Password" onfocus="emptyElement('status')"
                   maxlength="100">
            <br>
            <input id="pass2" type="password" class="form-control" placeholder="Retype Password" onfocus="emptyElement('status')"
                   maxlength="100">

            <br>
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want">
                <select id="accounttype" class="form-control"  onfocus="emptyElement('status')">
            </a> <!--  ^^ select element inside anchor ^^ -->
            <option value="" disabled selected> <!--  <-- disabled should be on select element, not option -->
                Choose Account Type
            </option>
            <option value="b">
                I am an artist
            </option>
            <option value="a">
                I am looking for artists
            </option>
            </select>

            </br>

            <br>
            <button id="signupbtn" onclick="signup()" class="btn btn-success pull-right">
                Create Account
            </button>
            <br>
            <span id="status" style="color: white"></span>
         </div>
    </div>
</form>

【讨论】：

非常感谢。我已经关注了您的 cmets，现在它可以在 Firefox 中使用。谢谢。

【解决方案2】：

我不确定<a> 的用途，但它是特定问题的原因，更改为以下将使其正常工作

 <a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want"></a>
      <select id="accounttype" class="form-control"  onfocus="emptyElement('status')">
            <option value="" disabled selected>
                Choose Account Type
            </option>
            <option value="b">
                I am an artist
            </option>
            <option value="a">
                I am looking for artists
            </option>
      </select>

【讨论】：