javascript - 验证选择框

Question

我想知道如何验证用户从我编码的选择框中选择了一个国家/地区。

代码:

<label>Select a Country:
    <br />
    <select name="country">
        <option selected disabled>Choose a Country</option>
        <option value="United States">United States</option>
        <option value="Canada">Canada</option>
        <option value="Mexico">Mexico</option>
    </select>
</label>

该函数看起来像:

function validateCountry(){
    if (form.country.value=="")
        alert("Please Select a Country!");
        form.country.focus();
        return false;
}

Answer 1

• 您的<select>元素当前的默认值为“选择一个国家/地区”，因此您的 if 语句永远不会为真(没有值为 == '' 的选项)。设置value属性来改变它。
• form没有定义。您可以使用多种方法选择表单，其中一个选项是 document.querySelector() 。以下假设主题 <select>框是第一个匹配的 select[name="country"]在您的文档中。

function validateCountry(){
    var selectBox = document.querySelector('select[name="country"]');
    if (selectBox.value==""){    
        alert("Please Select a Country!");
        selectBox.focus();
        return false;
    }
}

document.getElementById('button').onclick = validateCountry;

<label>Select a Country:
    <br />
    <select name="country">
        <option value='' selected disabled>Choose a Country</option>
        <option value="United States">United States</option>
        <option value="Canada">Canada</option>
        <option value="Mexico">Mexico</option>
    </select>
</label>

<button id='button'>Validate</button>