如何让用户选择下拉框的选项

How to make user to choose an option of dropdown box?

本文关键字：选项 选择 用户      更新时间：2023-09-26

我使用以下答案来实现所需的下拉框。唯一的区别是，我的应用程序中的下拉框代码在一个新页面中，该页面将弹出。

问题是，一旦用户选择了任何选项，包括没有值的选项，表单就会被提交！

第1页

   <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate
                                                         /1.9/jquery.validate.js"
                                                        </script>
   <script type="text/javascript">
          $("#everything").validate({
              messages: {
                  dd1: {
                     required: "Please select an option from the list, if 
                                none are appropriate please select 'Other'"
                }
            }
          });
          function popup(){
             document.getElementById("mydropbox").style.display = "Block";
              >> send request to server to show the Page 2 in body of mydropbox <<
             return false;
          }
   </script>
</head>
<body>
    <a href="" OnClick="return popup()">popup</a>
    <div id="mydropbox"></div>
...  
</body>
</html>

第2页

<html>
 <body>
    <form id="everything">
             <label for="dd1">Select the best option</label><br/>
             <select name="dd1" id="dd1" class="required">
                 <option value="">None</option>
                 <option value="o1">option 1</option>
                 <option value="o2">option 2</option>
                 <option value="o3">option 3</option>
             </select> 
             <br/><br/>
             <input type="submit" />
   </form>
 </body>
</html>

将required属性添加到select元素中。这至少应该在现代浏览器中起作用。

如果用户选择的选项有空值（如您的情况下的选项"无"），它会提醒用户。当然，您也必须进行服务器端验证，因为您不能依赖于此。

更新的演示

HTML

<input type="submit" id="sbt" /> //added id to the submit button sbt

js

$('#sbt').click(function (e) {
    e.preventDefault(); //stop form submit
    if ($('#dd1 option:selected').text() != 'None') {
        $('#everything').trigger('submit'); // if selected text not = to None then trigger form submit.
    }
});

演示

从表单中删除提交按钮并使用此

只有当下拉列表值更改时，才会提交表单

<select onchange="this.form.submit()">
    ...
</select>
相关文章：