首页 > 解决方案 > 在 JavaScript 中返回 Select 选项值

问题描述

我想将用户在下面的下拉菜单中选择的选择选项返回并输出到变量。

<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);
});

最初希望使用按钮事件侦听器来触发值的收集。

标签: javascripthtml

解决方案


如果要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>


推荐阅读