Question

如何检查下拉菜单中是否选择了任何选项作为formvaldation？

         <div class="form-group has-warning-add has-feedback" id="div_add_eenheid">


  <select class="form-control id="add_eenheid" name="add_eenheid" onclick="validate_add()" onmousemove="validate_add()">
                <option value="">--- Selecteer eenheid ---</option>
                <option value="stuk">stuk</option>
                <option value="doos">doos</option>
                <option value="kg">kg</option>
              </select><span class="glyphicon glyphicon-warning-sign form-control-feedback" id="add_eenheid_status"></span>
                </div>

function validate_add()
{
    // eenheid
    if(document.getElementById('add_eenheid').selected = true) { document.getElementById('div_add_eenheid').className = "form-group has-warning-add has-feedback"; document.getElementById('add_eenheid_status').className = "glyphicon glyphicon-warning-sign form-control-feedback"; }
    else
    { document.getElementById('div_add_eenheid').className = "form-group has-success-add has-feedback"; document.getElementById('add_eenheid_status').className = "glyphicon glyphicon-ok form-control-feedback"; }
}
</script>

我试过了：

getElementById('add_eenheid').selected = true
getElementById('add_eenheid').value == ''
getElementById('add_eenheid').selectedIndex ==  0

非常感谢任何帮助。

Answer 1

function validate_add(self) {
  console.log(self.value);
}

<select onchange="validate_add(this)">
  <option value="" disabled selected>--- Selecteer eenheid ---</option>
  <option value="stuk">stuk</option>
  <option value="doos">doos</option>
  <option value="kg">kg</option>
</select>

只要在下拉列表中选择了新值，就会触发onchange事件。
selected标记可确保--- Selecteer eenheid ---选项为默认选项。
disabled标记可确保永远不会选择--- Selecteer eenheid ---选项。
- Aka：下拉列表的值永远不会是--- Selecteer eenheid ---选项的值。

因此，只要onchange事件触发，您就可以确定该下拉列表的值是有效的。

Answer 2

<select class="form-control 
        id="add_eenheid" 
        name="add_eenheid" 
        onclick="validate_add(this.value)">
                <option value="">--- Selecteer eenheid ---</option>
                <option value="stuk">stuk</option>
                <option value="doos">doos</option>
                <option value="kg">kg</option>
</select>
<span class="glyphicon glyphicon-warning-sign form-control-feedback" id="add_eenheid_status"></span>

function validate_add( val )
{
    // eenheid
    if( val != "" ) { 
       document.getElementById('div_add_eenheid').className = "form-group has-warning-add has-feedback"; 
       document.getElementById('add_eenheid_status').className = "glyphicon glyphicon-warning-sign form-control-feedback"; 
    }
}

JS检查是否选择了下拉菜单中的选项

2 个答案: