Question

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

我对javascript或php一无所知。

我希望我足够清楚。

谢谢你们。

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

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

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

2 个答案: