javascript - 下拉菜单下的选项未被选中

Question

测试场景是，

1. 创建一个单元格，
2. 从下拉菜单中更改语言(从 R 到 Python)，
3. 输入代码并执行。下拉菜单的 HTML 代码是

<select class="form-control cell-control-select cell-control">
    <option>Markdown</option>
    <option>R</option>
    <option>Python</option>
    <option>RMarkdown</option>
</select>

下面是我的 casperjs 代码

casper.then(function(){
    this.mouse.click({ type: 'xpath' , path: "/html/body/div[3]/div/div[2]/div/div[3]/div[1]/div/select"});//x path for dropdown menu
    this.echo('clicking on dropdown menu');
    this.wait(3000);
});

casper.then(function(){
    var z = this.evaluate(function() {
    document.querySelector('.form-control').selectedIndex = 2;
    return true;
    });
    this.wait(3000);
});

它从下拉菜单中选择Python语言，但是当我们运行代码时，它在提示单元格中显示错误。当我们在 python 语言单元中运行 R 代码时，会遇到同样的错误。

Answer 1

问题可能是选择框上有一个未调用的更改监听器，因为设置 selectedIndex 属性不会触发更改。

触发此更改的可靠方法是使用 jQuery's change() :

this.evaluate(function() {
    var form = document.querySelector('.form-control');
    form.selectedIndex = 2;
    $(form).change();
});

如果页面中还没有 jQuery，如果本地有 jQuery，可以这样注入(inject):

var casper = require('casper').create({
    clientScripts: [ "jquery.min.js" ]
});

或者如果您本地没有:

var casper = require('casper').create({
    remoteScripts: [ "http://code.jquery.com/jquery-2.1.3.min.js" ]
});