如何通过选择 select 标签中的某个选项将 URL 获取到页面

Question

(I'm not asking how to implement this, but how to create a link for a third party site)

Say a site has an element

<select id="year">
    <option value="2022">2022</option>
    <option value="2023">2023</option>
</select>

The interactions are handled JS/React.

Is it possible to create a URL like https://example.com/#year.option="2022" that will take people to the page with a certain option selected?

Answer 1

there's several ways to achieve this, one way is conditional component rendering when using react:

options.map(option => (
if(option.year == 2022){
<Option data={optionDataProps} >
}
))

*make sure you check the query strings in this component

Furthermore you'd have to implement React Router Dom to render the component

Another Way to achieve is is by doing it serverside in node.js could look somewhat like this:

router.get("/api/options", (req, res) => {
const optionYear = req.query.year // "/api/options?year=2022

// then find all options in your DB and return them as JSON for your frontend to receive
})

Answer 2

This is not possible for a third party site, as there is no default browser functionality to achieve this. Form values cannot be prefilled from the URL.