Question

只有在所有问题都得到解答后才需要在页面上启用按钮，我有5个下拉菜单，需要确保用户在完成下一步之前回答所有问题。

试图在每次更改时迭代每个选择，但无法使其工作，不良的JS知识。

 arr = $('.select1, .select2, .select3, .select4, .select5')
  $('.select1, .select2, .select3, .select4, .select5').on('change', function(event) {
    $.each(arr, function(index, val) {
       /* tried here something */
    });
  });

我想知道可能有更好的方法可以做到这一点，比如一行：select.selected.size = 5。

感谢您提供任何帮助 - 想法，解决方案，链接等。

Answer 1

尝试

var arr = $('.select1, .select2, .select3, .select4, .select5');
arr.change(function () {
    if (arr.filter('option[value!=""]:selected').length == arr.length) $('#bntid').prop('enabled', true);
});

.filter()

:selected

Attribute Not Equal Selector [name!="value"]

在下拉列表中选择的

arr.filter('option[value!=""]:selected').length过滤器选项，其值不是""并且获得它的长度

Answer 2

我有一会儿，所以我想我会提供一个潜在的解决方案;给出如下HTML：

<select name="test1">
    <option value="-1">Please select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<!-- HTML repeated as much as you like -->

以下插件可以使用：

(function($){
    $.fn.allSelected = function(){
        return this.filter(function(){
            return parseInt(this.value, 10) > 0;
        }).length >= this.length;
    };
})(jQuery)

可以像这样调用：

$('select').on('change', function(){
    console.log($('select').allSelected());
});

JS Fiddle demo

更新了以上内容，以便可以将值传递到插件中，从而将其视为无效选项（在演示中，我是任意的，使用3），但默认为{{ 1}}如果用户不提供参数。在这种情况下，如果任何元素的值等于-1（因为缺少更好的名称），插件将返回noChoiceValue：

false

JS Fiddle demo

参考文献：

Answer 3

您可以尝试这样的事情

selects = $('[class^=select]');
selects.on('change', function(event) {
   if(selects.length == $('[class^=select]:selected]').length)
   {
   }
});

Answer 4

检查＆＃34;检查＆＃34;功能：

function checkValid($selects) {
    var check = true;
    $selects.each(function(){
         if ($(this).val() == "") {
             check = false;
         }
    });

    return check;
}

// usage example :
var ok = checkValid( $('.select1, .select2, .select3, .select4, .select5') );
$('#myButton').prop('enabled', ok);

Answer 5

下拉列表将始终具有选定的选项..

http://jsfiddle.net/hNvGf/1/

$('select>option:selected').length == $('select').length

您应该检查所选选项是否不是默认选项。

例如，在您的提交中..获取所选项目的值..

$.each($('.select1, .select2, .select3, .select4, .select5'), function(ind,val){
  if($(this).find('option:selected').val() !== 1)){
     return false;
  }
});

Answer 6

可以为页面上的下拉列表定义一个类，例如：

<select id='select1' class='dropdownClass'>
    <option value='value1'>value1</option>;
    <!-- etc -->

<select id='select2' class='dropdownClass'>
    <option value='value1'>value1</option>;
    <!-- etc -->

默认将下拉菜单设置为“未选中”，例如：

<body onload='setDropdown()'>
<!-- -->
</body>

<script>
function setDropdown(){
    document.getElementById('select1').selectedIndex = -1
    document.getElementById('select2').selectedIndex = -1
    //etc
}
</script>

然后只需将所选下拉列表的数目与更改的类中下拉菜单的总数进行比较，如果相等，则启用按钮：

$('.dropdownClass').change(function(){
    if ($('.dropdownClass>option:selected').length == ($('.dropdownClass').length)){
          document.getElementById('buttonId').disabled = false;
    }
});

请确保首先禁用该按钮：

<button id='buttonId' disabled='true'>Submit</button>

Answer 7

 arr = $('.select1, .select2, .select3, .select4, .select5')
  $('.select1, .select2, .select3, .select4, .select5').on('change', function(event) {
    var n = '0';
    $.each(arr, function(index, val) {
       if( $(this).find('option:selected').index() == '0' ){
          //first option [default] is selected
            var n = (n+1);
           }
        });
    if ( n == (arr.length+1) ){
       //all select has values
       }
  });

检查页面中的所有下拉列表是否都有选定的选项

7 个答案: