在至少选择一个下拉选项的情况下提交表单答案

【问题标题】：Submit a form on condition that atleast one drop-down option is selected在至少选择一个下拉选项的情况下提交表单
【发布时间】：2014-06-23 11:39:54
【问题描述】：

我有一个包含 8 个选择（下拉）字段的表单。我需要仅在选择8个选择字段的至少1个选项时才能成功提交表单。如果未选择任何选项，我需要在用户尝试提交但未选择至少一个选项时弹出警报。

我对javascript或php一无所知。

我希望我已经足够清楚了。

谢谢大家。

【问题讨论】：

你有 8 个下拉输入还是一个下拉输入有 8 个选项？
我在同一个表单上有 8 个下拉输入。在提交表单之前，我需要从至少一个下拉列表中选择至少一个选项。
如果是这样，那么 Wissam El-Kik 给出的答案将完全满足您的需求。选择那个答案。
Wissam El-Kik 的回答很有效。谢谢。

标签： javascript php jquery html validation

【解决方案1】：

这是JSFiddle。

代码如下：

<select class="dropdown1">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown2">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown3">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown4">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown5">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown6">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown7">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown8">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<button class="submit-btn">Submit</button>
<script type="text/javascript">
    $(".submit-btn").click(function(){
        var dropdown_selected = false;
        // Select all the selected dropdown values
        var dropdown_values_arr = new Array();
        dropdown_values_arr.push($(".dropdown1 option:selected").val());
        dropdown_values_arr.push($(".dropdown2 option:selected").val());
        dropdown_values_arr.push($(".dropdown3 option:selected").val());
        dropdown_values_arr.push($(".dropdown4 option:selected").val());
        dropdown_values_arr.push($(".dropdown5 option:selected").val());
        dropdown_values_arr.push($(".dropdown6 option:selected").val());
        dropdown_values_arr.push($(".dropdown7 option:selected").val());
        dropdown_values_arr.push($(".dropdown8 option:selected").val());
        // Loop over these values
        for(var i=0; i<dropdown_values_arr.length; i++){
            // If the value is not empty, then break the loop
            // Condition is met: at least one dropdown is selected
            if(dropdown_values_arr[i].length > 0){
                dropdown_selected = true;
                break;
            }
        }
        // If there's no selected values in any of the dropdowns, then throw an alert message
        if(dropdown_selected == false){
            alert("Please fill at least one dropdown");
        }
    });
</script>

【讨论】：

【解决方案2】：

我不太明白你的问题，但如果我是正确的，你想检查是否在下拉框中选择了某些内容？（选择）

Javascript（无 JQ）

function checkdropdown() {
  if(document.getElementById('select').value != "") {
    return true;
  }
  else {
    return false;
  }
}

HTML 代码

<form action='file.php' action='post'>
  <select name='select' id='select'>
    <option value=''>Select an option</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
    <option value='7'>7</option>
    <option value='8'>8</option>
  </select>
<input type='submit' onClick='if(!checkdropdown()) {alert("You need to select a value!"); return false;}' value='Submit form' />
</form>

jsfiddle：http://jsfiddle.net/KNd47/

【讨论】：

感谢 ThijmenDF 的帮助。