Search code examples
javascripthtml-selectcasperjs

Selecting drop down option using CasperJS


I've got stuck when I tried to select an option with CasperJS, tried many casperJS functions, but none of them did the trick so far, maybe there is a simple way to make a selection to this kind of form?

<form class="_messageBoxForm" id="messageBoxForm" name="messageBoxForm" method="post" action="" data-source="">
    <select class="_time _hours">        
         <option value="1">1</option>          
         <option value="2">2</option>       
         <option value="3">3</option>       
         <option value="4">4</option>         
         <option value="5">5</option>          
         <option value="6" selected="selected">6</option>                       
    </select>
</form>

Things I have already tried:

this.evaluate(function() { 
$('._time._hours').val('5').change(); 
}); 

this.evaluate(function() { document.querySelector('select._time._hours').selectedIndex = 2; 
return true; 
}); 

this.fillSelectors('form#messageBoxForm', { 
'select[class="_time _hours"]': '5' 
}, true);

Solution

  • Try the below solution it might help you

    casper.then(function(){
        this.click("._time._hours");
        this.evaluate(function() {
            var form = document.querySelector('.form-control');
            form.selectedIndex = 2;
            $(form).change();
        });
    });