javascript - CasperJS 无法设置选择列表值

Question

我有一个如下所示的选择列表:

<select id="ListingType" name="Criteria/ListingTypeID" onchange="Search.toggleListingType(this);">
    <option selected="selected" value="1">RH1</option>
    <option value="2">BC4</option>
    <option value="3">RR3</option>
    <option value="4">RH2</option>
    <option value="5">RE0</option>
</select>

我正在尝试将该值设置为 3。我尝试了 3 种方法，但均未成功。

1.

this.evaluate(function(value) {
    document.querySelector('select#ListingType').value = value;
    return true;
}, '3');
// insure the onChange JS is run
this.evaluate(function() {
    var element = document.querySelector('select#ListingType');
    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('change', false, true);
    element.dispatchEvent(evt);
});

这似乎有效(不抛出任何错误)，但值没有改变。

2.

this.fillSelectors('select#ListingType', {
    'select[name="Criteria/ListingTypeID"]' :  "3"
}, true);

这会抛出错误消息:“CasperError:填写表单时遇到错误:表单中没有与 css 选择器“select[name=”Criteria/ListingTypeID”]”匹配的字段”

我的选择器出了什么问题？

3.

// In desperation...
this.sendKeys('select#ListingType', 'RR3');

这似乎也有效(没有错误)，但该值再次没有改变。

为了完整起见，我尝试在每个变体之后发送“更改”事件。我还在每个之后转储所选元素的属性，并且它从不显示所设置的值。

请注意，此选择器所在的页面上有大量 JS 代码，并且此 元素未包装在

元素中。

我确信我犯了一些非常愚蠢的错误，但是在过去几天对这段代码进行黑客攻击之后，我没有取得任何进展。做到这一点的有效方法是什么？

最佳答案

您可以使用 slimerJS(它会打开 Firefox)轻松检查值的变化。

    this.fillSelectors('form#id_form', {
        'select[name="Criteria/ListingTypeID"]' :  "3"
        }, false);
    this.wait(6000,function(){  
        this.echo("i saw my new value");
    });     

如果您想通过文本而不是值填充选项(我发现它更容易):使用此函数:

casper.fillSelectOptionByText = function (selectSelector,text){
    this.evaluate(function(sel,setByText) {
        $(sel + " > option").each(function() {
            if($(this).text() === setByText) {
                $(this).attr('selected', 'selected');            
            }                        
        });
    },selectSelector,text);
};

在你的测试中:

this.fillSelectOptionByText("select[name='year of birth']","1991");

页面当然必须有jquery，否则你就注入(inject)它。

关于javascript - CasperJS 无法设置选择列表值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19416947/

上一篇：javascript - Javascript 中的构造函数和子属性

下一篇：javascript - 更改同一系列数据中数据的条形颜色

相关文章：

javascript - ThreeJS 如何更改 PlaneGeometry 上悬停面的颜色

javascript - 如何填充选择框，选择名称和ID时包括 ":"

php - 如何在每个选项标签中显示多个值？

javascript - 如何根据下拉列表中选定的选项设置隐藏字段的值？

php - 将 PHP 数组传递给 Javascript

javascript - jQuery 数据表自定义排序和过滤

node.js - 如何避免在 Puppeteer 和 Phantomjs 上被检测为机器人？

javascript - 如何根据输入值自动选择选项

javascript - 在 querySelectorAll() 中插入变量不起作用

javascript - 如何更改用户代理？

©2024 IT工具网  联系我们

Answer 1

您可以使用 slimerJS(它会打开 Firefox)轻松检查值的变化。

    this.fillSelectors('form#id_form', {
        'select[name="Criteria/ListingTypeID"]' :  "3"
        }, false);
    this.wait(6000,function(){  
        this.echo("i saw my new value");
    });     

如果您想通过文本而不是值填充选项(我发现它更容易):使用此函数:

casper.fillSelectOptionByText = function (selectSelector,text){
    this.evaluate(function(sel,setByText) {
        $(sel + " > option").each(function() {
            if($(this).text() === setByText) {
                $(this).attr('selected', 'selected');            
            }                        
        });
    },selectSelector,text);
};

在你的测试中:

this.fillSelectOptionByText("select[name='year of birth']","1991");

页面当然必须有jquery，否则你就注入(inject)它。