Question

我想为listbox进行JavaScript验证

如果没有选择Lisbox的值，它应该得到警告＆＃34;请选择你的技能＆＃34;

但是如果用户从6技能中选择3技能。我需要3个skiils应该使用JavaScript获取警报。

这是我的代码......

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

＆＃13;

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

＆＃13;

谢谢拉胡尔

Answer 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演示。

Answer 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'));

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

2 个答案: