Требовать Выберите Не Разрешить первый вариант

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

Использование 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 2

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

Answer 3

Гораздо сложнее удивительном колдовства @Mr. HK показал, но другой подход:

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 4

, если вы не возражаете, используя PHP или JavaScript для проверки ввода выбора. тег. здесь простой Javascript проверка:

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 
 
    } 
 
    }

<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>

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>