Question

除了默认的“已选择”选项外，我希望用户被迫在下拉列表中选择任何选项

这是我的下拉菜单代码;

    <form><label>Select Tank:</label>
<select class="text2" name="tank" id="mySelect">
          <option value="0" selected="selected">Select your tank</option>
          <option value="4"> Tank#1 </option>
          <option value="9"> Tank#2 </option>
          <option value="21"> Tank#3 </option>
          <option value="34"> Tank#4 </option>
      </select>
<input type="button" id="btncheck" value="Submit"/>
</form>

这是我的java;

$('#btncheck').click(function(){
     if ($("#mySelect ")[0].selectedIndex <= 0) {
         alert("Please select a tank from the menu!");
                return false;
                }
});

jsfiddle：http://jsfiddle.net/36JZL/41/

由于某种原因，它正确验证但形式未提交。

Answer 1

你可以在客户端使用jQuery来完成它，但它不是在客户端验证事物的好选择。

PasteBin：http://jsbin.com/zer/1

<form id="myForm">
<label>Select Tank:</label><br />
    <select class="text" name="tank" id="tankSelector">
        <option value="All" selected="selected"> Select Tank </option>
        <?QUERY HERE TO PULL AND LOOP FROM DATABASE?>
        <option value="<?php echo $row->id; ?>"> <?php echo $row->description; ?> </option>
        <? END LOOP ?>
    </select>
    <input type="submit">
</form>
<script>
    $(function() {
        $('#myForm').submit(function(e){
            if($('#tankSelector').val() == 'All') {
                alert('Select tank!');
                e.preventDefault();
            }
        });
    });
</script>

Answer 2

<label>Select Tank:</label><br />
<select class="text" id="seltank" name="tank">
    <option value="All" selected="selected"> Select Tank </option>
</select>

在提交按钮的客户端点击事件中添加一些javascript来检查下拉列表的值。

if(document.getElementById("seltank").value == "All")
{
     //put some code to alert the user or show error
    return false; //this should prevent your post
}

类似的帖子在这里How do I cancel form submission in submit button onclick event?

Answer 3

这就是我的所作所为：

<select class="text2" name="tank" id="mySelect">
     <option></option>
     <option value="4"> Tank#1 </option>
     <option value="9"> Tank#2 </option>
     <option value="21"> Tank#3 </option>
     <option value="34"> Tank#4 </option>
</select>

如果用户点击提交而未做出选择，系统将提示他们自动选择一个选项。限制是你没有得到一个很小的“选择一个选项”占位符。

在提交表单</select>之前从<select>下拉强制选项

3 个答案: