опции под ниспадающего меню не получает выбранный

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 из выпадающего меню, но когда мы бежим код это показывая Ошибка в ячейке быстрого доступа. Такая же ошибка возникает при запуске R-кода в ячейке языка python.

Answer 1

Возможно, проблема заключается в том, что в поле выбора есть переключатель изменений, который не вызывается, поскольку установка свойства selectedIndex не вызывает изменения.

Надежный способ вызвать это изменение заключается в использовании jQuery's change():

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

Если вы уже не имеете JQuery на странице, вы можете вводить его как это, если у вас есть JQuery локально:

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" ] 
});