抓取：选择中的选择选项

发布于 2025-01-09 13:20:12 字数 1909 浏览 1 评论 0原文

我正在尝试设置选择的选择选项。我通过以下方式执行此操作：

document.getElementById('identifier').value = 'xy'

当我执行上述代码时，我看到在下拉 UI 中选择了选项 xy - 但是，网站上的另一个值即使应该更新也不会更新。当我手动单击下拉选项时，它工作得很好。

我假设我需要添加某种事件侦听器或更新回调。这里有什么指点吗？谢谢。

编辑

具体示例：

请参阅[此网站][1]此处包含两个下拉菜单。

我得到第一个下拉列表，如下所示：

let runTimeElement = document.querySelector('#laufzeit')

然后我想将值设置为 12 个月：

runTimeElement.value = "12 Monate"

您可以看到 UI 如何适应，但价格却没有。它应该改变。当您手动单击下拉菜单时，它确实会发生变化。

谢谢！

编辑2

我之前尝试过page.select()。我循环遍历两个包含两个下拉列表的字符串值的数组，并尝试获取价格：

 for (const runTimeElement of runTimeElements.slice(1))
    {
        await page.select('#laufzeit', runTimeElement)
        for (const kmElement of kmElements.slice(1))
    {
        
        await page.select('#kilometerparket', kmElement)
        await page.waitForSelector(CONSTANTS.SELECTOR_CONTRACT_PRICE)
        let priceElement = await page.$(CONSTANTS.SELECTOR_CONTRACT_PRICE)
        let priceValue = await page.evaluate(el => el.textContent, priceElement)
            console.log(runTimeElement, kmElement, priceValue)
            contractRuntimes.push({
            contract_runtime: getCleanNumber(runTimeElement),
            monthly_price: getCleanNumber(priceValue.split(",")[0]),
            monthly_kms: getCleanNumber(kmElement),
        })
    }
    }

问题是价格没有更新。它始终保持默认价格，并且不会随着值的变化而变化。

例如当前它会输出：

[
{ contract_runtime: 6, monthly_price: 259, monthly_kms: 750 },
{ contract_runtime: 6, monthly_price: 259, monthly_kms: 1000 },
{ contract_runtime: 6, monthly_price: 259, monthly_kms: 1250 },
{ contract_runtime: 12, monthly_price: 259, monthly_kms: 750 },
{ contract_runtime: 12, monthly_price: 259, monthly_kms: 1000 },
{ contract_runtime: 12, monthly_price: 259, monthly_kms: 1250 }

]

原文

I am trying to set a select option of a select. I do so by the following:

document.getElementById('identifier').value = 'xy'

I see that the option xy is being selected in the dropdown UI when I execute above code - however, another value on the website does not update even though it should. When I click on the dropdown option manually it works perfectly fine.

I assume I need to add some sort of eventlistener or update callback. Any pointers here? Thanks.

EDIT

Concrete Example:

See [this website][1] here holding the two dropdowns.

I get the first dropdown like so:

let runTimeElement = document.querySelector('#laufzeit')

Then I want to set the value to say 12 months:

runTimeElement.value = "12 Monate"

You can see how the UI adapts, however the price does not. It should change. When you click the dropdowns by hand it does change though.

Thanks!

EDIT 2

I tried page.select() before. I loop through two arrays containing the string values of both dropdowns and try to grab the price:

 for (const runTimeElement of runTimeElements.slice(1))
    {
        await page.select('#laufzeit', runTimeElement)
        for (const kmElement of kmElements.slice(1))
    {
        
        await page.select('#kilometerparket', kmElement)
        await page.waitForSelector(CONSTANTS.SELECTOR_CONTRACT_PRICE)
        let priceElement = await page.$(CONSTANTS.SELECTOR_CONTRACT_PRICE)
        let priceValue = await page.evaluate(el => el.textContent, priceElement)
            console.log(runTimeElement, kmElement, priceValue)
            contractRuntimes.push({
            contract_runtime: getCleanNumber(runTimeElement),
            monthly_price: getCleanNumber(priceValue.split(",")[0]),
            monthly_kms: getCleanNumber(kmElement),
        })
    }
    }

The issue is that the price does not update. It always stays at the default price and doesnt move as the values change.

E.g. currently it would output:

[
{ contract_runtime: 6, monthly_price: 259, monthly_kms: 750 },
{ contract_runtime: 6, monthly_price: 259, monthly_kms: 1000 },
{ contract_runtime: 6, monthly_price: 259, monthly_kms: 1250 },
{ contract_runtime: 12, monthly_price: 259, monthly_kms: 750 },
{ contract_runtime: 12, monthly_price: 259, monthly_kms: 1000 },
{ contract_runtime: 12, monthly_price: 259, monthly_kms: 1250 }

]

分享到QQ

分享到微博