如何从<select>外部组件中的选项导出值？

Question

我有一个名为plan.js的组件，在该组件中我有一个下拉列表。我要做的是获得值并将其导入另一个组件。到目前为止，我所尝试的是选择中的onChange，并编写了一些函数，但网站上其他页面似乎都不起作用。

<select>
<option value="value1">€2.95/month</option>
<option value="value2">€29.95/year</option>
</select>

我想把值放在checkout.js组件中，像这样:

const { error } = await stripe.redirectToCheckout({
mode: "subscription",
lineItems: [{ price: "{value}", quantity: 1 }],

如果我硬核价格:"value"它工作并让我结帐，但我希望当用户从下拉菜单中选择时，获得选项的值并将其发送到结帐。最好没有id或this.，因为我尝试了几乎所有可行的方法，并给出了未定义的错误。我认为解决方案与输出具有值的const有关，这可能需要在handleChange和select到onChange={handleChange()}的函数内，但如果我没有线索。我用的是盖茨比js，如果有关系的话。很明显，我是一个几乎没有经验的新手，所以请帮帮我。

Answer 1

const { error } = await stripe.redirectToCheckout({
mode: "subscription",
lineItems: [
{
price: document.getElementById('your selector to select element').value,
quantity: 1
}
],
/* .. */
})

您需要使用元素选择器从select字段中获取值，并使用该值而不是{value}。