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

Answer 1

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>

Answer 2

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>