Question

是否可以强制/要求用户从下拉菜单中进行选择？例如：

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

默认选择“Volvo”。我想要的是浏览器知道用户已做出选择而不接受自动默认值。

我在想这样的事情：

<form action="">
<select name="cars" required="required">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

有什么建议吗？

Answer 1

我从jquery validate调整了一个例子，让它适合你。我知道你在原来的问题中要求它基于HTML5，但也许这个混合的例子是可以接受的。

http://jsfiddle.net/36MkJ/

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <script>
        $(document).ready(function(){
            $("#carsForm").validate();
        });
    </script>
</head>
<body>
<form class="cmxform" id="carsForm" method="get" action="">
    <select name="cars" class="required">
        <option value="">Select a car</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

原始示例位于http://docs.jquery.com/Plugins/Validation

Answer 2

问题发布以来已经过去了很多时间。对于像我一样绊脚石的任何人，解决方案现在变得更加简单：您可以仅将第一个选项添加到选择中，而无需设置值。浏览器将自动将其视为“未选择任何内容”：

<!DOCTYPE html>
<html>
  <body>
    <form>
      <select required>
        <option value="">Please select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>
      <input type="submit"/>
    </form>
  </body>
</html>

JSFiddle显示它可以使用，不需要其他JS：https://jsfiddle.net/nrs5a7qh/

需要从下拉列表中进行选择5

2 个答案: