Javascript选择单个选项

我最近一直在尝试创建一个函数，在选择框上进行更改时，它只返回所选的选项值

我的标记如下所示：

<select id='rangeSelector'>
    <option value='custom'>Custom</option>
    <option value='7 days'>7 days</option>
    <option value='14 days'>14 days</option>
    <option value='WTD'>WTD</option>
    <option value='MTD'>MTD</option>
    <option value='QTD'>QTD</option>
    <option value='YTD'>YTD</option>
</select>

习俗
7天
14天
WTD
MTD
QTD
年初至今

以及javascript函数：

var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
    var x = rangeSelector.children;
    for (var i = 0; i < x.length; i++) {
        var newX = x[i].value;
        console.log(newX);
    }   
}, false);

var rangeSelector=document.getElementById（'rangeSelector'）；
rangeSelector.addEventListener（'change'，函数（e）{
var x=rangeSelector.children；
对于（变量i=0；i

我想做的是当我点击7天返回7天时。

不要阅读

s。阅读

其他有趣的位包括

.selectedIndex

和

.selectedOptions

---

（当然，正如Abhitalks在注释中所指出的，在您的处理程序中，元素获取将已经为您完成。）

您可以使用jQuery来实现此目的，例如：

$("#rangeSelector").on("change", function() {
    var rangeSelect = document.getElementById("rangeSelector");
    var value = selectJaar.options[rangeSelect.selectedIndex].value;
    return value;
});

首先获取下拉列表，然后获取所选值并返回它

 var rangeSelector = document.getElementById('rangeSelector');
 rangeSelector.addEventListener('change', function(e) {
       console.log(rangeSelector.value);
    }, true);

在触发事件“change”

rangeSelector之后，您不需要为此进行循环。value

已经具有所选元素的值

因此，如果您想将“活动”添加到所选选项，您也可以这样做：

     var rangeSelector = document.getElementById('rangeSelector');
     rangeSelector.addEventListener('change', function(e) {
         var x = rangeSelector.children;
         var y = rangeSelector.selectedIndex;
         x[y].className = x[y].className + " active";
         console.log(rangeSelector.value);
     }, true);

但您应该通过循环将“活动”类从所有非活动类中删除：）

var rangeSelector=document.getElementById（'rangeSelector'）；
rangeSelector.addEventListener（'change'，函数（e）{
var x=rangeSelector.children；
变量y=范围选择器。selectedIndex；
对于（变量i=0；i

试着简单地使用

这个值

：

document.getElementById（'rangeSelector'）.addEventListener（'change'，函数（e）{
警报（该值）；
});

习俗
7天
14天
WTD
MTD
QTD
年初至今
Just
console.log（这个.value）。非常感谢。它解决了我的问题，假设根据选择的值是否可以添加和激活类？如果是这样的话，我怎样才能做到这一点当然是可能的。您将具体设置什么，以及设置在哪里？如果我选择7days选项，标记将类似于等等，那么您应该通过
document.getElementById（'rangeSelector'）获取元素的索引。selectedIndex
然后：
var x=rangeSelector.children；变量y=范围选择器。selectedIndex；x[y].addAttribute（foo）@DragosPodaru:你为什么要这么做？当您在选择中选择任何选项时，它会将
selected
属性设置为true。如果需要，将其用于css规则。添加一个类充其量是多余的。非常感谢，但这会将活动类添加到所有类中，它不会根据激活的选项切换类。我只是为此添加了修复程序。我没有这方面的经验，但当您切换类以激活html属性类时，该属性类显示为空是正常的吗？您可以为此添加一些逻辑，只需删除属性`x[i]。removeAttribute（“类”）；`，但我认为它不会像把它变成空的那个样快。我会改变答案中最后一个代码，在那个里你们可以决定：删除属性“class”或者删除“class”值
     var rangeSelector = document.getElementById('rangeSelector');
     rangeSelector.addEventListener('change', function(e) {
         var x = rangeSelector.children;
         var y = rangeSelector.selectedIndex;
         x[y].className = x[y].className + " active";
         console.log(rangeSelector.value);
     }, true);

     var rangeSelector = document.getElementById('rangeSelector');
     rangeSelector.addEventListener('change', function(e) {
         var x = rangeSelector.children;
         var y = rangeSelector.selectedIndex;
         for (var i = 0; i < x.length; i++) {
             x[i].className = "";  //or x[i].removeAttribute("class");`
         }   
         x[y].className = x[y].className + " active";
         console.log(rangeSelector.value);
     }, true);