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

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

javascript jquery

Javascript 检查页面中的所有下拉列表是否都有选定的选项,javascript,jquery,Javascript,Jquery,只有在所有问题都已回答的情况下，才需要启用页面上的按钮，我有5个下拉列表，需要确保用户在进入下一步之前回答了所有问题尝试在每次更改中重复每个选择，但无法使其工作，错误的JS知识 arr = $('.select1, .select2, .select3, .select4, .select5') $('.select1, .select2, .select3, .select4, .select5').on('change', function(event) { $.each(a

只有在所有问题都已回答的情况下，才需要启用页面上的按钮，我有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

感谢您提供的任何帮助—想法、解决方案、链接等。

您可以尝试以下内容

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

试一试

arr.filter（'option[value！=”“]：selected'）。长度

过滤下拉列表中选择的选项，其值不是

”

，并获取其长度

在“检查”功能中执行检查：

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

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

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

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

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

我有一些时间，所以我想我会提供一个潜在的解决方案；给定如下所示的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 -->

可以这样称呼：

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

更新了上述内容，以便将一个值传递到插件中，使其被视为无效选择（在演示中，我任意使用了

），但如果用户不提供参数，则默认值为

-1

。在这种情况下，如果任何元素的值等于

noChoiceValue

（因为缺少更好的名称），插件将返回

false

：

(function($){
    $.fn.allSelected = function(opts){
        var s = $.extend({
            'noChoiceValue' : -1
        }, opts);
        return this.filter(function(){
            return this.value !== s.noChoiceValue.toString();
        }).length >= this.length;
    };
})(jQuery);

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

参考资料：

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

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

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

提交

Select one

[value！=“”]

(function($){
    $.fn.allSelected = function(opts){
        var s = $.extend({
            'noChoiceValue' : -1
        }, opts);
        return this.filter(function(){
            return this.value !== s.noChoiceValue.toString();
        }).length >= this.length;
    };
})(jQuery);

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

 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
       }
  });

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