选择多个值时列表框的 JavaScript 验证答案

【问题标题】：JavaScript Validation for Listbox when mulitple values are selected选择多个值时列表框的 JavaScript 验证
【发布时间】：2014-10-15 18:03:28
【问题描述】：

我想对列表框进行 JavaScript 验证

如果没有选择来自 Lisbox 的值，它应该得到警报“请选择您的技能”

但是如果用户从 6 技能中选择 3 技能。我需要 3 个技能应该使用 JavaScript 保持警惕。

这是我的代码...

在提交按钮上调用脚本..

<html>
    <head>
        
    <script></script>
    
    </head>
    
    <body>
        
        <form name="registration" id="registration_form_id" action="" method="post">
            
             <select id="skillid1" name="skill[]" multiple="multiple" size="3" >
                    
             <option value="html">HTML</option>
             <option value="css">CSS</option>
             <option value="javascript">JAVASCRIPT</option>
             <option value="php">PHP</option>
             <option value="mysql">MY-SQL</option>
             <option value="jquery">JQUERY</option>
             
             </select>
             
            <button type="submit" onClick="myFunction()">Submit</button>
            
        </form>
     </body>
    
</html>

谢谢拉胡尔

【问题讨论】：

标签： javascript php html checkbox listbox

【解决方案1】：

首先使用onsubmit 表单事件而不是按钮单击。在这种情况下，当不应该提交表单时返回 false。这是一个例子：

function myFunction(form) {
    
    var select = form['skill[]'];

    // Check if skill is selected
    if (select.selectedIndex === -1) {
        alert("Please Select Your Skill");
        return false;
    }
    
    // Check if selected 3 skills out of 6
    if (select.selectedOptions.length) {
        var options = [].map.call(select.selectedOptions, function(option) {
            return option.text;
        }).join('\n');
        alert("You selected: \n" + options);
        return true;
    }
    
    return false;
}

<form name="registration" id="registration_form_id" action="" method="post" onsubmit="return myFunction(this)">
    <select id="skillid1" name="skill[]" multiple="multiple" size="3">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JAVASCRIPT</option>
        <option value="php">PHP</option>
        <option value="mysql">MY-SQL</option>
        <option value="jquery">JQUERY</option>
    </select>
    <button type="submit">Submit</button>
</form>

请注意，从事件处理程序返回 true 将提交表单（在上面的演示中，提交被禁止）。

这里是JSFiddle 演示。

【讨论】：

selectedOptions 是相当新的（不是吗？）。你知道支持吗（例如 OmniWeb 5.11 或 IE 10 显然不支持它）？
@RobG 可以简单地遍历options 集合并获得selected 选项。
当然。为了将 NodeLists 与本地方法混合，我更喜欢一个简单的 toArray 函数，然后在没有 call 或 apply 的情况下调用本地方法，例如toArray(select.options).filter(function(option){return option.selected}).

【解决方案2】：

要从多选中获取选定的选项，您应该遍历 options collection 并收集被选中的选项。

还有selectedOptions collection（根据 dfsq 的回答），但跨浏览器的支持不完整。

使用简单的 toArray 函数使循环方法变得更容易：

// Return an array of list members in numeric index order
// Respect sparse lists.
function toArray(list) {
  var array = [];

  // Use for loop for maximum compatibility
  for (var i=0, iLen=list.length; i<iLen; i++) {

    // Respect sparse lists
    if (list.hasOwnProperty(i)) {
      array[i] = list[i];
    }
  }
  return array;
}

因此，如果您有对 select 元素的引用，则可以使用以下方式获取选定的选项：

var selectedOptions = toArray(select.options).filter(function(option) {
                        return option.selected;
                      });

现在您可以使用以下命令在警报中显示每个选项的显示文本：

alert(selectedOptions.map(function(option){return option.text}).join('\n'));

【讨论】：