代码之家 › 专栏 › 技术社区 › umair.ashfr

使用Select选项更改DOM并检查所需字段的数目

html jquery javascript

umair.ashfr · 技术社区 · 6 年前

有一个网页包含一定数量的必需字段,需要填写才能成功提交表单。 required字段的最大指标是它有一个*并且它的标签中有一个“required”类。当我们更改下拉值时,所需字段的数量会发生变化。我已经编写了一些javascript和jquery代码来更改下拉值,然后检查所需字段的数量,但出于某种原因(很可能DOM更改需要时间,而代码在这之前执行,因此实际上所需字段数量的更改不会反映在页面中)。但是,如果手动更改下拉列表值,然后运行checkRequired()函数,它可以正常工作,但我希望自动化过程。我怎样才能做到?

var count = 0;
var allRequired = []; // total number of required fields in the page
var newRequired = []; // change in the no. of required fields
$('select').each(function(){

	var id = $(this).attr('id');
    $('#'+id+' option').each(function() {
        $(this).attr('selected','selected');
        if(count == 0){
            getAllRequiredFields();
        }
        else{
            setTimeout(() => {
                checkRequired();
                for (let index = 0; index < allRequired.length; index++) {
                    console.log('for else',allRequired[index]);
                    if(!newRequired.includes(allRequired[index])){
                        console.log('allRequired',allRequired[index]);
                    }
                    
                }
            }, 3000);
            
        }
        count++;
    })
    
    
});
 

function getAllRequiredFields(){
    
    $('span.required').each(function () {
        var text = $(this).parent().text()
        var id = $(this).closest("td").attr('id').split("_label")[0];        
        allRequired.push(id);
     });
}
function checkRequired() {
    newRequired = [];
    $('span.required').each(function () {
        var text = $(this).parent().text()
        var id = $(this).closest("td").attr('id').split("_label")[0];
        
         newRequired.push(id);
         
     });
     for (let index = 0; index < allRequired.length; index++) {
        console.log('for else',count);
        if(!newRequired.includes(allRequired[index])){
            console.log('allRequired',allRequired[index]);
        }
        
    }
}

1 回复 | 直到 6 年前

umair.ashfr 6 年前

刚添加的更改事件解决了我的问题

$('#'+id+' option').each(function() {
   $(this).attr('selected','selected');
    $('#'+id).change();
    if(count == 0){
        getAllRequiredFields();
    }
    else{
        setTimeout(() => {
            checkRequired();
            for (let index = 0; index < allRequired.length; index++) {
                console.log('for else',allRequired[index]);
                if(!newRequired.includes(allRequired[index])){
                    console.log('allRequired',allRequired[index]);
                }

            }
        }, 3000);

    }
    count++;
})

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前