如何根据选择的选项更改 HTML 属性

Question

I am trying to make a button change when a certain option from a drop-down is selected.

 document.getElementById("region").onchange = function() { document.getElementById("order-btn").product-code = this.value; }

 <select name="option" id="option" required> <option value="1234d1">Option 1</option> <option value="amdk19">Option 2</option> <option value="akd1sk">Option 3</option> <option value="19sd91">Option 4</option> <option value="asjd91">Option 5</option> <option value="129e8j">Option 6</option> </select> <div class="btn-checkout"> <button id="order-btn" type="submit" product-code="">Checkout</button> </div>

我需要做的是从下拉列表中选择一个选项时，将与该选项关联的产品代码放入按钮上的product-code="HERE"中。

例如，如果我在下拉菜单中选择选项 2，则其产品代码"amdk19"将被放入按钮中，如下所示：

<button id="order-btn" type="sumbit" product-code="amdk19">

我认为这可以用 JavaScript 来完成，但我不知道怎么做。

谢谢

Answer 1

像这样的东西应该可以工作，你不能像你尝试的那样直接在 object 上设置属性——相反，你必须在按钮上使用setAttribute 。 您可以在下拉列表中使用.value来获取所选选项的值。

 document.getElementById("option").onchange = function() { const btn = document.getElementById("order-btn"); // `this` refers to the dropdown, so you're getting the dropdown's selected value btn.setAttribute("product-code", this.value); } document.getElementById("order-btn").onclick = function() { // `this` refers to the button console.log(this.getAttribute("product-code")); }

 <select name="option" id="option" required> <option selected disabled>Select An Option</option> <option value="1234d1">Option 1</option> <option value="amdk19">Option 2</option> <option value="akd1sk">Option 3</option> <option value="19sd91">Option 4</option> <option value="asjd91">Option 5</option> <option value="129e8j">Option 6</option> </select> <div class="btn-checkout"> <button id="order-btn" type="submit" product-code="">Checkout</button> </div>

Answer 2

因为已经有答案了。 我想向您推荐 Jquery 以便于处理 javascript。

1. 像这样包含 jquery CDN：在 HTML 中添加 jquery CDN

2. 将id添加到您的select和button 。 在 HTML 中添加 ID

3. 然后使用 jquery 方法，如下所示：

 $("#optionsOfSomething").on("change",function(e){ $("#order-btn").attr("product-code",$(this).val()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <select name="option" id="optionsOfSomething" required> <option value="1234d1">Option 1</option> <option value="amdk19">Option 2</option> <option value="akd1sk">Option 3</option> <option value="19sd91">Option 4</option> <option value="asjd91">Option 5</option> <option value="129e8j">Option 6</option> </select> <div class="btn-checkout"> <button id="order-btn" type="submit" product-code="">Checkout</button> </div>