如何在下拉菜单中选择一个项目？

Question

如何在下拉菜单中选择项目，然后我可以发送表格？这是表格：

<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>

select下拉菜单的xPath为/html/body/div[3]/div/div[1]/ul/li/div/div[2]/form/select。

我尝试了sendKeys：

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

但在使用屏幕快照后，Select...选项仍处于选中状态。

我还尝试点击select元素以展开列表，但我会截取屏幕截图并不会展开任何内容。 我尝试使用casper.thenClick(x('/html/body/div[3]/div/div[1]/ul/li/div/div[2]/form/select/option[3]'));直接点击我想要的选项，但在截取屏幕截图后，我仍然选择了Select...选项。

有什么想法吗？也可以在没有点击的情况下发送表单，但是直接发送格式化的数据？另外如何学习如何正确使用casperjs，你需要在js和webdeveloppment中有一个扎实的背景来轻松完成这些简单的任务吗？

Answer 1

您错过了结束“选择”标记。

<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>

恐怕我无法完整回答你的问题，但这应该有助于你的语法。

Answer 2

更改属性selectedIndex可以完成工作（感谢RobG）：

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