Question

我尝试将select选项属性设置为selected。但我尽量避免在CasperJS中使用nth-child，因为PhantomJS的n-child存在漏洞。所以我尝试使用它作为jQuery（css_path）的替代。

function setSelectedCountry(i){
    window.__utils__.echo("i :"+i);
    var query = "//*[@id='cboCountry']/optgroup[2]/option["+i+"]";
    __utils__.getElementByXPath(query).setAttribute("selected","selected");
}

但是，当我以这种方式评估代码时

this.evaluate(setSelectedCountry, 5);

选择选项不会更改。

此外，当我尝试使用

触发onblur()时

document.getElementById("cboCountry").onblur();

在setSelectedCountry()内部，没有任何事情发生。

为什么会这样？

此外，当我尝试使用XPath表达式调用该函数，而另一个使用CSS选择器时，我从CasperJS返回了未定义的错误。

我使用这个功能：

function getCityName(i){
    var query = "//*[@id='cboCity']/option["+i+"]";
    return __utils__.getElementByXPath(query).innerText;
}

然后我得到了另一个：

function setSelectedCountry(i){
    var query = "#cboCountry > optgroup:nth-child(3) > option:nth-child("+i+")";
    jQuery(query).attr("selected", "selected").blur();
}

当我尝试同时运行它们时，这就是我所拥有的

PAGE.ERROR: TypeError: 'undefined' is not an object (evaluating
'__utils__.getElementByXPath(query).innerText')

你能给我一些建议吗？

[EDITED]

这是我的标记：这个用于cboCountry选择选项：

<select name="cboCountry" id="cboCountry" onkeypress="return selectItem();" onkeyup="event.cancelbubble=true;return false;" onkeydown="return handleKey();" onfocus="activeList=this;this.enteredText='';" onchange="//hs.DropCity();" onblur="hs.DropCity();"
class="txtBox">
  <option value="">-- --Select-- --</option>
  <optgroup label="Popular Destinations">
    <option value="MA05110065">Indonesia</option>
    <option value="MA05110067">Malaysia</option>
    <option value="MA05110069">Singapore</option>
    <option value="MA05110001">Thailand</option>
  </optgroup>
  <optgroup label="Other Destinations">
    <option value="MA05110083">Afghanistan</option>
    <option value="MA05110124">Albania</option>
    <option value="MA05110133">Algeria</option>
    <option value="MA05110186">American Samoa</option>
    <option value="MA05110103">Andorra</option>
    <option value="MA05110014">Angola</option>
    <option value="MA05110135">Anguilla (UK)</option>
    <option value="MA05110136">Antigua and Barbuda</option>
    <option value="MA05110171">Argentina</option>
    <option value="MA05110206">Armenia</option>
    <option value="MA05110183">Venezuela</option>
    <option value="MA05110070">Vietnam</option>
    <option value="MA05110013">Western Sahara</option>
    <option value="MA05110082">Yemen</option>
    <option value="MA05110027">Zambia</option>
    <option value="MA05110028">Zimbabwe</option>
  </optgroup>
</select>

这个用于cboCity选择选项：

<select name="cboCity" id="cboCity" onkeypress="return selectItem();" onkeyup="event.cancelbubble=true;return false;" onkeydown="return handleKey();" onfocus="activeList=this;this.enteredText='';" onchange="//hs.DropLocation();" onblur="hs.DropLocation();"
class="txtBox">
  <option value="">-- --Select-- --</option>
  <option value="">-- Select --</option>
  <option value="MA02022810">Ambarawa</option>
  <option value="MA09090008">Ambon</option>
  <option value="MA08090042">Anyer</option>
  <option value="MA02022861">Wonosobo</option>
  <option value="MA06060051">Yogyakarta</option>
</select>

Answer 1

问题是属性和属性之间的区别。当您在DOM中更改属性时，浏览器通常不会重新评估属性。在这些情况下，您需要在DOM元素上更改该属性后面的属性。

在这种情况下，您需要更改所选索引。 select元素具有selectedIndex属性，您可以将其更改为您可以通过option.index获得的预期选项：

function setSelectedCountry(i){
    __utils__.echo("i :"+i);
    var opt = "//*[@id='cboCountry']/optgroup[2]/option["+i+"]";
    var select = document.getElementById('cboCountry');
    select.selectedIndex = __utils__.getElementByXPath(opt).index;
    select.onblur(); // or `onchange()`
}

有关选项索引的详细信息，请参阅this answer。

"//*[@id='cboCity']/option["+i+"]"无法使用，因为此表达式将匹配#cboCity元素的直接子元素的选项，但中间有optgroup个。使用"//*[@id='cboCity']//option["+i+"]"或"//*[@id='cboCity']/optgroup/option["+i+"]"。

如何使用CasperJS

1 个答案: