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

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