更改选定的选项值不会更改DOM

问题描述：

有一个下拉菜单，其中包含<select>和一些<option>-源代码中的标记。更改选定的选项值不会更改DOM

如果手动更改通过单击选项值 - 一个<div>的内容与一个id #xyz将被改变（由AJAX，JS ...）

现在，我写了一个JS脚本，并把它称为CasperJS来模拟这个。该脚本工作正常，当我得到的snapshot.png选择选项被改变：

$('select#zzz').val('123').change();

或

document.querySelector('select#zzz').selectedIndex = 2;

脚本将等待几秒钟（5000毫秒）。

但div的内容将不会被“刷新”或“更改”。

有谁知道，为什么？

下面是脚本：

var casper = require('casper').create({ 
    loadImages:false, 
    verbose: true, 
    userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko)', 
    clientScripts: ["jquery.min.js"] 
}); 

casper.start('http://www.somewebsite.tld', function() { 
    this.test.assertExists('select[id="zzz"]', 'select is found'); 
}); 

this.evaluate(function() { 
    document.querySelector('select#zzz').selectedIndex = 2; 
    //$('select#zzz').val('123').change(); 
}); 

casper.wait(5000, function() { 
    this.capture("screenshot.png"); 
    fs.write('results.json', this.getPageContent(), 'w'); 
}); 

casper.run(function() { 
    this.echo('Dropdown selected').exit(); 
});

答

老气的问题，但你需要使用

casper.thenEvaluate(function() { 
    $('select#zzz').val('123').change(); 
});

，而不是

this.evaluate(function() {

更改选定的选项值不会更改DOM

相关推荐