在 JavaScript 中返回 Select 選項值

Question

我想將用戶在下面的下拉菜單中選擇的選擇選項返回並輸出到變量。

<h3>Cake Size</h3>
<select id="cakeSize">
    <option value="6">6" Cake</option>
    <option value="8">8" Cake</option>
    <option value="10">10" Cake</option>
    <option value="12">12" Cake</option>
</select>
<button type="button" id="calc">Calculate</button>

我想將6/8/10/12放入一個變量中。

const calc = document.getElementById('calc');
let cakeSize = document.getElementById('cakeSize');
let value = cakeSize.value;

calc.addEventListener('click', function test(){
  return alert(value);
});

最初希望使用按鈕事件偵聽器來觸發值的收集。

Answer 1

如果要alert所選值，請使用alert(cakeSize.value) 。 let value = cakeSize.value; 將只有初始select值。

 let cakeSize = document.getElementById('cakeSize'); // let value = cakeSize.value; calc.addEventListener('click', function test() { return alert(cakeSize.value); });

 <h3>Cake Size</h3> <select id="cakeSize"> <option value="6">6" Cake</option> <option value="8">8" Cake</option> <option value="10">10" Cake</option> <option value="12">12" Cake</option> </select> <button type="button" id="calc">Calculate</button>