How to select an item in dropdown menu?

Question

How to select an item in a dropdown menu so then I can send the form ? Here is the form :

<form class="form-inline" method="get" action="http://www.thebonnotgang.com/quotes/q.php">
<input type="hidden" value="1m" name="timeframe">
<input class="span2" type="date" value="2011-07-01" name="dayFrom">
<input class="span2" type="date" name="dayTo">
<select class="span3" name="symbol">
<option>Select...</option>
<option value="VXZ">ETF - iPath MT</option>
<option value="VXX">ETF - iPath ST</option>
<button type="submit"> Download </button>
</select>
</form>

Form

The xPath of the select dropdown menu is /html/body/div[3]/div/div[1]/ul/li/div/div[2]/form/select.

I tried sendKeys :

casper.then(function() {
    this.sendKeys(x('/html/body/div[3]/div/div[1]/ul/li/div/div[2]/form/select'), 'FTSEMIB - Tods');
});

but after taking a screenshort the Select... option is still selected.

I also tried to click on the select element in order to expand the list but I take a screenshot and it doesn't expand anything. I tried to click directly on the option I want with casper.thenClick(x('/html/body/div[3]/div/div[1]/ul/li/div/div[2]/form/select/option[3]')); but after taking a screenshot I still have the Select... option selected.

Any idea ? Also is it possible to send the form without clicks but directly send the formated data ? Also how to learn to use casperjs properly, do you need a solid background in js and webdeveloppment to do these simple tasks easily ?

Possibly a duplicate of [*How to automatically expand html select element in javascript*](http://stackoverflow.com/questions/2923600/how-to-automatically-expand-html-select-element-in-javascript). You can make a particular option selected by either setting the select element's [*selectedIndex* property](http://www.w3.org/html/wg/drafts/html/master/forms.html#dom-select-selectedindex) to the index of the Option you want selected, or setting the [*selected* property](http://www.w3.org/html/wg/drafts/html/master/forms.html#dom-option-selected) of the appropriate option. — RobG, Oct 14 '14 at 00:42
Have you tried it with the various `fill` functions like [`fillSelectors`](http://docs.casperjs.org/en/latest/modules/casper.html#fillselectors)? — Artjom B., Oct 14 '14 at 10:04

score 0 · Answer 1 · answered Oct 14 '14 at 00:58

You're missing the closing "select" tag.

<form class="form-inline" method="get" action="http://www.thebonnotgang.com/quotes/q.php">
    <input type="hidden" value="1m" name="timeframe">
    <input class="span2" type="date" value="2011-07-01" name="dayFrom">
    <input class="span2" type="date" name="dayTo">
    <select class="span3" name="symbol">
        <option>Select...</option>
        <option value="VXZ">ETF - iPath MT</option>
        <option value="VXX">ETF - iPath ST</option>
        <button type="submit"> Download </button>
    </select> <!--This right here.-->
</form>

I am afraid I cannot answer your question to its entirety, but this should help your syntax.

I just forgot to copy paste the closing tag from the website — Wicelo, Oct 14 '14 at 01:07

score 0 · Answer 2 · answered Oct 14 '14 at 15:31

0

Changing the attribute selectedIndex gets the job done (thanks to RobG):

casper.then(function () {
    this.evaluate(function () { return document.getElementsByName("symbol")[0].selectedIndex = 14; });
});

answered Oct 14 '14 at 15:31

Wicelo

2,358
2
28
44

How to select an item in dropdown menu?

2 Answers2