CODEWITHSUNDEEP
javascript
user5349610
user5349610

Reputation:

Javascript select individual option

I have been trying lately to make a function that on change on the select box it return only the selected option value.

My markup looks like this:

<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>

and the javascript function: 

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);

What I am trying to do is when I click on 7 days to return only 7 days.

Upvotes: 0

Views: 89

Answers (4)

user2575725
user2575725

Reputation:

Try simply using this.value:

document.getElementById('rangeSelector').addEventListener('change', function(e) {
  alert(this.value);
});
<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>

Upvotes: 0

Alexander Shcheglakov
Alexander Shcheglakov

Reputation: 157

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

You do not need for loop for that, after firing event "change" rangeSelector.value already have value of chosen element.

so if you wanna add "active" to selected option you can do same:

     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);

but you should remove "active" class from all non-active, by looping them:)

     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);

Upvotes: 0

user4051844
user4051844

Reputation:

You could use jQuery for this, example:

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

This first gets the dropdown, then get the selected value, and return it.

Upvotes: 0

Amadan
Amadan

Reputation: 198294

Don't read the <option>s. Read the <select>.

document.getElementById('rangeSelector').value

Other interesting bits include .selectedIndex and .selectedOptions.

(Of course, as Abhitalks notes in the comments, in your handler, the element getting will already done for you.)

Upvotes: 2

Related Questions