Javascript和Forms获取选择选项的值

Javascript and Forms getting value of selection option

本文关键字：选项 选择 获取 Forms Javascript      更新时间：2023-09-26

我如何使用Javascript来获得这个表单选择中的选项值?

我知道我可以使用:

document.customerInfo.cardType.selectedIndex = = 4

但这对我不起作用。我有超过30个，我真的不想写那么多代码。我能不能得到期权的价值?

<form id="teamSelect"><select name="team">
    <option value="TEN">Tennessee</option>
    <option value="GB">Green Bay</option>
    </select>
    <input type="button" value="submit" onclick="games();"/>
    </form>

为select添加ID:

<select name="team" id="team">

那么做

document.getElementById("team").value

这将返回TEN, GB等

获取对表单的引用:

var form = document.getElementById('teamSelect');

或

var form = document.forms['teamSelect']

或者如果表单被赋予了与其id相同的名称:

var form = document.teamSelect;

然后遍历其元素集合:

var elements = form.elements;
for (var i=0, iLen=elements.length; i<iLen; i++ ) {
  // elements[i] is a form control, get its value and
  // do whatever
}

注意，对于select元素，该值是当前被选中的选项的值。

当一个选项假设总是被选中时(即应该有selected属性，以便它是默认的被选中选项)，在许多情况下省略，并且选择可以没有被选中的选项。在本例中，它的selectedIndex属性将为-1。

还要注意，所选选项的值应该是value属性的值，如果缺少它，则是text属性的值(选项的文本)。然而IE得到这个错误，如果没有值属性，返回一个空字符串。因此，要获取select的值，您需要执行:

function getSelectValue(select) {
  var idx = select.selectedIndex;
  // If one has been selected, return its value or text
  if (idx >=0) {
     return select.options[idx].value || select.options[idx].text
  // Otherwise none are selected - return empty string?
  } else {
     return '';
  }
}
相关文章：