javascript - HTML:JS:BOOTSTRAP ;验证多选下拉列表

Question

在我的网络应用程序中，我们使用了 twitter-bootstrap 主题。我必须在我的应用程序中对一个表单进行客户端验证。该表单包括文本字段、复选框和多选下拉列表。我可以验证文本字段和复选框，但无法验证下拉列表。

 <select id="users" name="username[]"  class="chzn-select span2" multiple="multiple">  
     <option value="sdfsd">sdfsdfs</option>
           .... 
   </select>

但是在运行时选择标签是隐藏的并且它们生成<li>标签。我不能使用 document.getElementByID();

请提供最好的验证方法。

Answer 1

试试这个

HTML

<form action="#">
<select id="users" name="username[]"  class="chzn-select span2" multiple="multiple"> 
      <option value=""></option>  
     <option value="sdfsd">sdfsdfs</option>
           .... 
</select>
<input type="submit" id="add_btn">
</form>

脚本

$('#add_btn').on('click', function(e) {
        if($('#users').val() == null && $('#users_chosen').is(':visible')) {
        alert('You must choose division');
        }

});

DEMO

或

$(function(){
    $('form').submit(function(){
         var options = $('#users > option:selected');
         if(options.length == 0){
             alert('no value selected');
             return false;
         }
    });
});

DEMO