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

How do I get the value of an item in a drop down menu list using javascript?

本文关键字：项目 列表 下拉菜单 何使用 javascript 获取      更新时间：2023-09-26

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

这是我的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；

编辑：无法让Gregg的答案为我工作。试图在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;
    }
}

简单的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];
}

看看这把小提琴：http://jsfiddle.net/3fqv2jwa/1/

以下内容仅在jQuery版本中相同：http://jsfiddle.net/3fqv2jwa/2/

相关文章：