How can i get the drop down selected values and form an number

Question

Here i have a 3 drop-down list which holds number ranging from 0 to 9, this is actually for the cost input.for example if i select 4 in 1st dropdown and 5 in second dropdown and 0 in third dropdown, then the cost should be 450. now what i am trying to do is, Once i input the values and click submit,i should capture the value 450 in one variable and convert it to integer. How can i do that?

here's what i have tried

<select id="cost1" class="cost-block-add">
    <option value="0">0</option>
    <option value="1">1</option>
    ...  
</select>

<select id="cost2" class="cost-block-add">
    <option value="0">0</option>
    <option value="1">1</option>
    ...
</select>

<select id="cost3" class="cost-block-add">
    <option value="0">0</option>
    <option value="1">1</option>
    ...
</select>

<button class="submit-button minimal-padding" onclick="getCost()"> submit </button>

JS:

function getCost(){
    var str;
    var num_arr = [];
    var elems = document.querySelectorAll('.cost-block-deduct');
    elems.forEach(function(el){          
        var nums = el.options[el.selectedIndex].text                
        num_arr.push(nums)
    })
}   

Answer 1

You have used wrong class name. It should be .cost-block-add

You can try this:

 function getCost() { var str; var num_arr = []; var elems = document.querySelectorAll('.cost-block-add'); elems.forEach(function(el) { var nums = el.options[el.selectedIndex].value; num_arr.push(nums) }); console.log(num_arr); //alert(num_arr.join("")); this is string alert((Number.parseInt(num_arr.join("")))); // convert to number } 

 <select id="cost1" class="cost-block-add"> <option value="0">0</option> <option value="1">1</option> </select> <select id="cost2" class="cost-block-add"> <option value="0">0</option> <option value="1">1</option> </select> <select id="cost3" class="cost-block-add"> <option value="0">0</option> <option value="1">1</option> </select> <button onClick="getCost()">Click</button> 

Answer 2

Here's a working solution. No need to use an array . You can simply concatenate the values. Hope it helps!

 function getCost() { var convertedNumber = ""; var elems = document.querySelectorAll('.cost-block-add'); elems.forEach(function(el){ var nums = el.options[el.selectedIndex].text convertedNumber += nums; }); alert(parseInt(convertedNumber)); } 

 <form> <select id="cost1" class="cost-block-add"> <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-add"> <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-add"> <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 onClick="getCost()">Click</button> </form> 

Answer 3

JQuery

function getCost(){
    var cost = "";
    $("select.cost-block-add").each(function(index, elem){
      var val = $(elem).val();
      cost = cost.concat(val);
    });

    var costInt = parseInt(cost);
}

Answer 4

Reduce method to acheive the solution

var a = document.querySelectorAll('.cost-block-add');

var b = Array.from(a);

var abc = b.reduce(function(a,b){a.push(b[b.selectedIndex].innerHTML);return a},[]).join('');

parseInt(abc)