1

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 }

]

fxmb
  • 23
  • 6
  • Thanks @ggorlen! I edited the question accordingly. Does this work for you? I also think it must be an event listener that is missing. I do not know how to implement this though. FYI I am using pupeteer overall to build the scraper – fxmb Feb 24 '22 at 08:04
  • Thanks, it makes more sense. Have you tried [How to select an option from dropdown select](https://stackoverflow.com/questions/45864516/how-to-select-an-option-from-dropdown-select)? Puppeteer has [`page.select()`](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pageselectselector-values). – ggorlen Feb 24 '22 at 19:06
  • Does this answer your question? [How to select an option from dropdown select](https://stackoverflow.com/questions/45864516/how-to-select-an-option-from-dropdown-select) – Silvan Bregy Feb 25 '22 at 14:16
  • Thanks! I edited the qn (see EDIT 2). I tried page.select() before - it did not work probably because I am doing something wrong – fxmb Feb 28 '22 at 20:55
  • Does anyone have a clue what might solve this issue? – fxmb Mar 08 '22 at 18:23
  • @ggorlen - I tried the select before, It must have something to do with an eventhandler on the web page – fxmb Mar 10 '22 at 17:36
  • Every site is different so I can't really take action on this without more information about what the site's HTML, CSS and JS looks like, a link to the site itself, etc. – ggorlen Mar 10 '22 at 18:59

0 Answers0