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

【问题标题】：Changing selected option value does not change the DOM更改选定的选项值不会更改 DOM
【发布时间】：2014-09-23 22:58:22
【问题描述】：

在源代码中有一个带有<select> 和一些<option>-标签的下拉菜单。

如果您通过单击手动更改选项值 - 带有 id #xyz 的 <div> 的内容将被更改（通过 ajax、js ...）

现在我写了一个 js-script 并用 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();
});

【问题讨论】：

标签： javascript ajax phantomjs html-select casperjs

【解决方案1】：

老问题，但你需要使用

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

而不是

this.evaluate( function() {

【讨论】：