options under dropdown menu is not getting selected

Question

Testing scenario is,

1. creating a cell,
2. Change the language from the drop down menu(from R to Python),
3. Enter the code and execute it. HTML code for drop down menu is

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

and below is my casperjs code

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

it is selecting the Python language from the drop down menu but when we run the code it is showing Error in prompt cell. The same error we get when we run R code in python language cell.

Answer 1

The issue is probably that there is a change listener on the select box which doesn't get called, because setting the selectedIndex property doesn't trigger a change.

A reliable way to trigger this change is to use jQuery's change():

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

If you don't already have jQuery in the page, you can inject it like this if you have jQuery locally:

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

or if you don't have it locally:

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