检查页面中的所有下拉列表是否都具有选定的选项
[英]Check if all dropdowns in page has a selected option
问题描述
Need to enable a button on a page only if all questions have been answered, I have 5 dropdowns for this and need to make sure user answer all of them before letting him go to next step. 
仅在所有问题均已回答后才需要启用页面上的按钮，为此，我有5个下拉菜单，并且需要确保用户回答所有问题，然后再允许他进行下一步。
Tried to iterate through each select on each change, but can't make it work, bad JS knowledge. 试图遍历每个更改的每个选择，但是无法使它工作，这是不好的JS知识。
arr = $('.select1, .select2, .select3, .select4, .select5')
$('.select1, .select2, .select3, .select4, .select5').on('change', function(event) {
$.each(arr, function(index, val) {
/* tried here something */
});
});
I was wondering may be there is a better way to do this, something like in one line: select.selected.size = 5 . 我想知道是否有更好的方法可以做到这一点，就像一行一样： select.selected.size = 5 。
Thank you for any kind of help - ideas, solutions, links, etc.. 感谢您提供的任何帮助-想法，解决方案，链接等。
7 个解决方案
解决方案1
3 已采纳 2014-04-14 09:37:56
I had a few moments, so I thought I'd offer a potential solution; 我花了一些时间，所以我想我会提供一个潜在的解决方案。 given HTML like the following: 给定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 -->
The following plug-in would work: 以下插件将起作用：
(function($){
$.fn.allSelected = function(){
return this.filter(function(){
return parseInt(this.value, 10) > 0;
}).length >= this.length;
};
})(jQuery)
And can be called like so: 可以这样称呼：
$('select').on('change', function(){
console.log($('select').allSelected());
});
Updated the above so that a value can be passed into the plug-in to be considered an invalid choice (in the demo I've, arbitrarily, used 3 ), but which defaults to -1 if the user supplies no argument. 更新了上面的内容，以便可以将值传递到插件中被认为是无效的选择（在本演示中，我随意使用3 ），但是如果用户不提供任何参数，则默认为-1 。 In this case if any of the elements have a value equal to the noChoiceValue (for want of a better name) the plug-in returns false : 在这种情况下，如果任何元素的值等于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
}));
});
References: 参考文献：
-
$.extend().$.extend()。 -
filter().filter()。 -
on().on()。 -
parseInt().parseInt()。
解决方案2
2 2014-04-14 09:17:59
Try 尝试
var arr = $('.select1, .select2, .select3, .select4, .select5');
arr.change(function () {
if (arr.filter('option[value!=""]:selected').length == arr.length) $('#bntid').prop('enabled', true);
});
Attribute Not Equal Selector [name!="value"] 属性不等于选择器[name！=“ value”]
arr.filter('option[value!=""]:selected').length filter options selected in dropdown whose value is not "" and get it's lenght arr.filter('option[value!=""]:selected').length在下拉菜单中，其值选定的过滤选项不是"" ，并得到它的lenght
解决方案3
1 2014-04-14 09:17:14
You can try something like this 您可以尝试这样的事情
selects = $('[class^=select]');
selects.on('change', function(event) {
if(selects.length == $('[class^=select]:selected]').length)
{
}
});
解决方案4
1 2014-04-14 09:21:35
Do the check in your "check" function : 在您的“检查”功能中进行检查：
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);
解决方案5
1 2014-04-14 09:21:46
Dropdowns will always have a selected option.. 下拉菜单将始终具有选定的选项。
http://jsfiddle.net/hNvGf/1/ http://jsfiddle.net/hNvGf/1/
$('select>option:selected').length == $('select').length
You should probally be checking if the selected option is not the default one.. 您可能应该检查所选选项是否不是默认选项。
for example, in your submit.. get the value of the selected item.. 例如，在您的提交中..获取所选项目的值。
$.each($('.select1, .select2, .select3, .select4, .select5'), function(ind,val){
if($(this).find('option:selected').val() !== 1)){
return false;
}
});
解决方案6
1 2019-10-21 04:33:07
One could define a class for dropdown lists on the page, eg: 可以为页面上的下拉列表定义一个类，例如：
<select id='select1' class='dropdownClass'>
<option value='value1'>value1</option>;
<!-- etc -->
<select id='select2' class='dropdownClass'>
<option value='value1'>value1</option>;
<!-- etc -->
Set dropdowns to 'not selected' by default, eg: 将下拉菜单默认设置为“未选中”，例如：
<body onload='setDropdown()'>
<!-- -->
</body>
<script>
function setDropdown(){
document.getElementById('select1').selectedIndex = -1
document.getElementById('select2').selectedIndex = -1
//etc
}
</script>
Then simply compare the number selected dropdowns to the total number of dropdowns in the class on change, and if equal, enable the button: 然后只需将所选下拉列表的数目与更改后的类中下拉菜单的总数进行比较，如果相等，则启用按钮：
$('.dropdownClass').change(function(){
if ($('.dropdownClass>option:selected').length == ($('.dropdownClass').length)){
document.getElementById('buttonId').disabled = false;
}
});
Be sure to have the button initially disabled: 确保首先禁用该按钮：
<button id='buttonId' disabled='true'>Submit</button>
解决方案7
0 2014-04-14 10:03:02
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
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.