Question

从选择标签中获取 javascript 的值

2014-03-15

60

javascript jquery

我正在使用 javascript 函数从特定 <select></select> 获取 id。

<select name="no" id="dropdownlist" class="defaultvalue" style="width: 100%;">
  <option value="">Select Option</option>
</select>

但问题是我有 8 个 <select></select> 用于下拉列表，我想在 javascript 中获取这些值，例如：

var list = document.getElementById('dropdownlist');

但这只能通过使用 getElementByClass 来实现，但这对我来说不起作用。任何帮助都将不胜感激。

Answer 1

由于您使用 jquery 标记了您的问题，我建议您使用它：

$('#dropdownlist').val();

更新：但是如果您有 8 个选择 - 只需对它们使用相同的类，您就可以使用下一个代码：

$('.className').each(function(i,el){
  console.log($(this).val());
})

Answer 2

没有 getElementByClass ，它是 getElementsByClassName ，但您不妨使用 querySelectorAll ，它有更好的支持

var list  = [];

var elems = document.querySelectorAll('.defaultvalue');

for (var i=0; i<elems.length; i++) {
    list.push( elems[i].value );
}

FIDDLE

在 jQuery 中您可以执行

var list = $.map($('.defaultvalue'), function(el) { return el.value});

FIDDLE

并且 ID 是唯一的，它们不能用于同一文档中的多个元素

Answer 3

如果您想使用带有多选标签的纯 javascript，请使用以下代码

更新

function getAllValue(){
    var allSelectTags  = document.getElementsByClassName("defaultvalue");
    var selVal = [];

    for(var i=0; i<allSelectTags.length; i++){
         var value = allSelectTags[i].options[allSelectTags[i].selectedIndex].value;
         selVal.push(value);
    }
    var result = "";
    for(var j=0; j<selVal.length; j++){
        result += selVal[j] + "<br />";
    }
    document.getElementById("result").innerHTML = result;
}

演示