JavaScript - 一種檢查選項的方法 <select>選擇了標簽 我有一個 select 標簽，我想檢查是否選擇了飛蛾。 &lt;select name="Birth_Month"&gt; &lt;option value="" SELECTED&gt;- Month -&lt;/option&gt; &lt;option value="January"&gt;一月&lt;/option&gt; &lt;option value="Fabruary"&gt;Fabruary&lt;/option&gt; &lt; option value="March"&gt;三月&lt;/option&gt; &lt;option value="April"&gt;四月&lt;/option&gt; &lt;option value="May"&gt;五月&lt;/option&gt; &lt;option value="June"&gt;六月&lt;/option &gt; &lt;option value="July"&gt;七月&lt;/option&gt; &lt;option value="August"&gt;八月&lt;/option&gt; &lt;option value="September"&gt;九月&lt;/option&gt; &lt;option value="October"&gt;十月&lt; /option&gt; &lt;option value="November"&gt;November&lt;/option&gt; &lt;option value="December"&gt;December&lt;/option&gt; &lt;/select&gt; 這樣做： if (document.registration_form.Birth_Month.value === ' ') { alert('請填寫 select 月份；') } 但是這個 JavaScript 對於某些 select-s 有效，而對於其中一些無效。 Obviously, when the "- Month -" is selected the it returnes "- Month -" insted of "" (empty string).我做錯了什么？檢查標簽選擇的最佳方法是什么？</select>

Question

I have a select tag and I want to check if a moth is selected.

 <select name="Birth_Month">
    <option value="" SELECTED>- Month -</option>
    <option value="January">January</option>
    <option value="Fabruary">Fabruary</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>

So do this:

if (document.registration_form.Birth_Month.value === '') 
{
    alert('Please fill select Month!');
}

But this JavaScript for some select-s work and for some of them, does not. Obviously, when the "- Month -" is selected the it returnes "- Month -" insted of "" (empty string). What I have done wrong? What is the best way of checking the tag's selection?

Answer 1

Browsers didn't always have a .value property for <select> - we used to have to get the value of the <option>:

var birthMonth = document.registration_form.Birth_Month;
if (birthMonth.options[birthMonth.selectedIndex].value === '') {
  // something
}

I use jQuery .val() now. I don't remember which browsers lack the select.value property, and maybe those browsers are so old that we don't need to worry about them anymore. But jQuery doesn't use select.value - it loops through each of the options to find the selected option's value.

Of course, if you know you'll always have a single blank option as the first option, just check for selectedIndex==0.

Answer 2

I believe integers are a better practice for option values. Anyhow, the snippet below doesn't care if your default option value is an empty string or a zero value.

var birthMonth = document.registration_form.Birth_Month;
if(birthMonth.options[birthMonth.selectedIndex].value === false){
    alert('Please fill select Month!');
}

Answer 3

You do not need to use 'selectedIndex'

<select name="Birth_Month">
        <option value="" SELECTED>- Month -</option>
        <option value="January">January</option>
        <option value="Fabruary">Fabruary</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="August">August</option>
        <option value="September">September</option>
        <option value="October">October</option>
        <option value="November">November</option>
        <option value="December">December</option>
    </select>
    
    if (document.getElementById('Birth_Month').value === '') 
    {
        alert('Please fill select Month!');
    }

OR

<select name="Birth_Month">
    <option value="they_did_not_select_anything" SELECTED>- Month -</option>
    <option value="January">January</option>
    <option value="Fabruary">Fabruary</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>

if (document.getElementById('Birth_Month').value === 'they_did_not_select_anything') 
{
    alert('Please fill select Month!');
}