CasperJS / Javascript选择多个选项 [英] CasperJS/ Javascript Selecting Multiple Options

问题描述

试图抓取一个网站，这是通用的HTML代码

Trying to scrape a website, where this is the generic HTML code

<select id="xxx" multiple name="zzz">
<option value="123">xaxaxa</option>
<option value="124">zazaza</option>
<option value="125">ajajaj</option>
<option value="126">azzzsa</option>
</select>

它没有被表单包围所以我尝试使用casperjs提供的fill（）函数但是不起作用。

It is not enclosed by a form so I tried using the fill() function that casperjs provides but that did not work.

对于单个条目，我通常会使用casper.click（），这样可以工作，但即使循环也不适用于多个条目

For single entries, I would usually casper.click() and that would work but this does not work for multiple entries even with looping

此外我试图抓取的网站说按住来选择多个元素，但是也可以通过拖动和选择来完成。

Also the website I am trying to scrape says hold "shift" to select multiple elements but then it can be done by also dragging and selecting.

我需要选择多个值

推荐答案

这可以通过设置轻松完成选择每个选项元素的属性 true 。

This can be easily done by setting the selected property of each option element to true.

casper.selectOptionsByValues = function(selectCssSelector, values){
    this.evaluate(function(selector, values){
        [].forEach.call(document.querySelector(selector).options, function(opt){
            if (values.indexOf(opt.value) !== -1) {
                opt.selected = true;
            }
        });
    }, selectCssSelector, values);
};

值必须是字符串。您可以这样使用它：

Values must be strings. You can use it like this:

casper.selectOptionsByValues("#xxx", [ "124", "125" ]);

CasperJS by text

类似功能可以通过文本选择来实现：

CasperJS by text

A similar function can be achieved when selecting by text:

casper.selectOptionsByTexts = function(selectCssSelector, texts){
    texts = texts.map(function(t){ return t.trim() });
    this.evaluate(function(selector, texts){
        [].forEach.call(document.querySelector(selector).options, function(opt){
            if (texts.indexOf(opt.text.trim()) !== -1) {
                opt.selected = true;
            }
        });
    }, selectCssSelector, texts);
};

并按如下方式使用：

casper.selectOptionsByTexts ("#xxx", [ "zazaza", "ajajaj" ]);

PhantomJS按值

同样的事情可以直接为PhantomJS完成：

PhantomJS by values

The same thing can be done for PhantomJS directly:

function selectOptionsByValues(page, selectCssSelector, values){
    page.evaluate(function(selector, values){
        [].forEach.call(document.querySelector(selector).options, function(opt){
            if (values.indexOf(opt.value) !== -1) {
                opt.selected = true;
            }
        });
    }, selectCssSelector, values);
};

并像这样使用：

selectOptionsByValues(page, "#xxx", [ "124", "125" ]);

触发更改

可能是必要时触发更改事件，以防页面上的另一个元素依赖于

Triggering a change

It may be necessary to trigger a change event in case another element on the page depends on the

this.evaluate(function(selector, values){
    [].forEach.call(...);

    var evt = document.createEvent("UIEvents"); // or "HTMLEvents"
    evt.initUIEvent("change", true, true);
    document.querySelector(selector).dispatchEvent(evt);
}, selectCssSelector, values);

更改事件触发器来自这里。

这篇关于CasperJS / Javascript选择多个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！