javascript - 如何使用 javascript 获取下拉菜单列表中项目的值？

Question

基本上，我正在制作一个简单的税收计算器，我需要获取下拉菜单中的元素值(特定州)，然后基于该值，将该州的所得税率添加到要使用的变量中以便将来计算。

这是我的 HTML 代码:

<fieldset id="taxinfo">
    <label for="state">State of residence</label>
    <select id="state" name="state"> 
    </select>
</fieldset>

我已经用以下 JavaScript 代码填充了它:

var stateList = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV",
               "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"];
// array to add months to drop-down list menu
function addStates() {
var select = document.getElementById("state");
for (var i = 0; i < stateList.length; i++) {
    var list = stateList[i];
    var el = document.createElement("option");
    el.innerHTML = list;
    el.value = list;
    select.appendChild(el);
  }
}

例如，如果有人从下拉菜单列表中选择“TX”，我想将名为 stateTax 的变量设置为 0；

编辑:无法让格雷格的答案为我工作。尝试在 if/else 决策结构中使用它——似乎不起作用:

// function to acquire tax rate based on state selected from menu list
function getStateTax() {
    var stateTax;
    var sel = document.getElementById("state");
    var st = sel.options[sel.selectedIndex].text;

    // if/else decision structure to set appropriate tax based on state
    if (st == "TX") {
        stateTax = 0;
    }
}

Answer 1

简单的 JavaScript 方式:

var sel = document.getElementById("state");
var state = sel.options[sel.selectedIndex].value;

jquery 方式

var state = $('#state').val();

州税编辑功能:

我会将您的州列表转换为 JavaScript 对象，以保存每个州的税率，如下所示:

var taxRate = { 'AL': .07, 'AK': .05, 'AZ': .07 }

然后您可以从 JavaScript 对象轻松创建状态列表，如下所示:

var stateList = Object.keys(taxRate);

您可以像这样使用 addStates 函数:

function addStates() {
var select = document.getElementById("state");
for (var i = 0; i < stateList.length; i++) {
    var list = stateList[i];
    var el = document.createElement("option");
    el.innerHTML = list;
    el.value = list;
    select.appendChild(el);
  }
}

并获取如下税率:

function getStateTax(){
    var sel = document.getElementById("state");
    var state = sel.options[sel.selectedIndex].value;
    return taxRate[state];
}

看到这个 fiddle :http://jsfiddle.net/3fqv2jwa/1/

这里有同样的事情，只是在 jQuery 版本中:http://jsfiddle.net/3fqv2jwa/2/