[英]Check if all dropdowns in page has a selected option
仅在所有问题均已回答后才需要启用页面上的按钮，为此，我有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 。
感谢您提供的任何帮助-想法，解决方案，链接等。
我花了一些时间，所以我想我会提供一个潜在的解决方案。 给定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小提琴演示 。
更新了上面的内容，以便可以将值传递到插件中被认为是无效的选择（在本演示中，我随意使用3 ），但是如果用户不提供任何参数，则默认为-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
}));
});
JS小提琴演示 。
参考文献：
$.extend() 。 filter() 。 on() 。 parseInt() 。 尝试
var arr = $('.select1, .select2, .select3, .select4, .select5');
arr.change(function () {
if (arr.filter('option[value!=""]:selected').length == arr.length) $('#bntid').prop('enabled', true);
});
arr.filter('option[value!=""]:selected').length在下拉菜单中，其值选定的过滤选项不是"" ，并得到它的lenght
您可以尝试这样的事情
selects = $('[class^=select]');
selects.on('change', function(event) {
if(selects.length == $('[class^=select]:selected]').length)
{
}
});
在您的“检查”功能中进行检查：
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);
下拉菜单将始终具有选定的选项。
$('select>option:selected').length == $('select').length
您可能应该检查所选选项是否不是默认选项。
例如，在您的提交中..获取所选项目的值。
$.each($('.select1, .select2, .select3, .select4, .select5'), function(ind,val){
if($(this).find('option:selected').val() !== 1)){
return false;
}
});
可以为页面上的下拉列表定义一个类，例如：
<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>
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
}
});
使用jquery'this'从下拉列表中返回所选选项，但它返回页面上的所有下拉列表
[英]Using jquery 'this' to return selected option from dropdown, but it returns all dropdowns on page
在页面加载时，如果任何下拉菜单都选择了选项，我会尝试取消隐藏 div 中的多个下拉菜单
[英]On page load I am trying to unhide multiple dropdowns in a div if any of the dropdowns have an option selected
在特定下拉列表中选择某个选项后，从所有其他选定的多个下拉列表中删除一个选项
[英]Removing an option from all other chosen multiple dropdowns, when selected on a particular dropdown
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.