선택한 옵션 값을 변경해도 DOM이 변경되지 않습니다

Question

소스 코드에 <select> 및 일부 <option>- 태그가있는 드롭 다운 메뉴가 있습니다.

수동으로 클릭하여 옵션 값을 변경하는 경우 -

지금 내가 JS 스크립트를 작성하고 그것을 호출 (... JS, 아약스에 의해)이 변경 될 <div>의 내용을 id를 #xyz로를 이것을 시뮬레이션하는 CasperJS. 이 스크립트는 잘 작동하고 나는 snapshot.png를 얻을 때 선택 옵션에 의해 변경 :

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

또는

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

그런 다음 스크립트가 몇 초 (5000ms)를 기다립니다.

하지만 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(); 
}); 

Answer 1

먹은 질문하지만 당신은

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

하지

this.evaluate(function() { 

를 사용할 필요가