簡體   English   中英

如何使用戶選擇下拉框選項?

[英]How to make user to choose an option of dropdown box?

我正在使用以下答案來實現所需的下拉框。 唯一的區別是我的應用程序中下拉框的代碼在一個新頁面中,該頁面將會彈出。

問題是,一旦用戶選擇任何選項(包括無值的選項),就將提交表單!

第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.
    }
});

演示

從表單中刪除“提交”按鈕並使用它

僅當dropdownlist值更改時,才會提交表單

<select onchange="this.form.submit()">
    ...
</select>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM