How to get the selected values of multiple drop down box onclick?

Question

I have 3 drop down list which ranges from 0 to 9.
Once i select values in the dropdown list and click on submit button I need to get the values selected in all 3 dropdown list. How can I do that?

<select id="cost1" class="cost-block">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- And so on up to 9 -->
</select>

<select id="cost2" class="cost-block">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- And so on up to 9 -->
</select>

<select id="cost3" class="cost-block">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- And so on up to 9 -->
</select>

javascript

function calculateBalance() {
    var pluss = document.getElementById("cost1").value;
    alert(pluss);
}

Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Azad, Jan 09 '17 at 11:17

Suchit kumar · Answer 1 · 2017-01-09T11:28:16.663

Try this:

<select id="cost1" class="cost-block">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>

    <select id="cost2" class="cost-block">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>

    <select id="cost3" class="cost-block">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
    
    <button id="click">CLICK</button>
    
    <script>

document.getElementById("click").addEventListener("click", function(){
         var x=[];
         var select = document.querySelectorAll('select');

         select.forEach(function(el,i){
          x[i] = el.value; 
        })

   console.log(x);
   });
    </script>

Ionut Necula · Accepted Answer · 2017-01-09T11:30:02.823

You can use document.querySelectorAll('.cost-block'); to get all the select elements, add a click event listener and a forEach to get all the selected values of every select. Try this:

document.getElementById("btn").addEventListener("click", function(){
     var elems = document.querySelectorAll('.cost-block');
     elems.forEach(function(el){
          console.log(el.options[el.selectedIndex].text);
     })
 });

<select id="cost1" class="cost-block">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>

    <select id="cost2" class="cost-block">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>

    <select id="cost3" class="cost-block">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
<button id='btn'>Send</button>

How to get the selected values of multiple drop down box onclick?

2 Answers2