Question

说我们有以下内容：

<select name="select" required>
<option disabled selected value>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

<button type="submit" name="submit">Submit</button>

我希望此字段是必填项，但我不想让用户提交第一个选项（<option disabled selected value>Please Select Option</option>）

默认情况下，应该选择第一个选项（<option disabled selected value>Please Select Option</option>），直到用户更改选项。

我试过谷歌搜索这个问题，但我只能找到不同的问题，但不是这个问题。我的想法是它必须使用Javascript来完成这个，但我想在走这条路线之前使用HTML选项。

谢谢你的帮助！

Answer 1

<select>
    <option selected="true" style="display:none;">Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Answer 2

比令人敬畏的巫术@Mr复杂得多。香港展示了，但另一种方法：

HTML：

<select id="selector" name="select" required>
<option disabled selected value="0">Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button id="mainButton" type="submit" name="submit">Submit</button>

JS：

$("#mainButton").click(function(event) {
var picked = $('#selector option:selected').val();
if (picked == 0){
alert("you must pick an option")
}
else{
//do whatever
}
})

见这里：http://jsfiddle.net/ShL4T/105/

Answer 3

如果您不介意使用php或javascript来验证select的输入。标签。这是一个简单的JavaScript验证：

＆＃13;

    function verify(){
      var somevar = document.getElementById("select").value;
        if(somevar == 'Please Select Option'){
         document.getElementById("message").innerHTML = 'Invalid Choice, Please choose Option 1, 2, or 3';
    }else{
        //do whatever you want to do
    }
    }

＆＃13;

<p id="message"></p>
    <select name="select" id="select" required>
    <option disabled selected>Please Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    </select>
    
    <button type="submit" onclick="verify()" name="submit">Submit</button>

＆＃13;

Answer 4

使用JS

$("#clickButton").click(function (event) {
    var picked = $('#selector option:selected').val();
    if (picked == 0) {
        alert("Please select any value");
    } else {
        console.log("Selected")
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector" name="select" required>
    <option disabled selected value="0">Select</option>
    <option>Data 1</option>
    <option>Data 2</option>
    <option>Data 3</option>
</select>

<button id="clickButton" type="submit" name="submit">Submit</button>

Answer 5

 <form>
  <select name="select" required>
    <option disabled selected value>Please Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <button type="submit" name="submit">Submit</button>
</form>

Answer 6

    <select id="option" name="select" required>
    <option disabled selected value="0">Please Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
     </select>

需要选择不允许第一个选项

6 个答案: