我如何獲得下拉選擇的值並形成一個數字

Question

在這里，我有3個下拉列表，其中包含0到9之間的數字，這實際上是用於成本輸入的。例如，如果我在第一個下拉列表中選擇4 ，在第二個下拉列表中選擇5 ，在第三個下拉列表中選擇0 ，則成本應該是450。現在我想做的是，一旦輸入值並單擊Submit，我應該將值450捕獲到一個變量中並將其轉換為整數。 我怎樣才能做到這一點？

這是我嘗試過的

<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

您使用了錯誤的class名。 它應該是.cost-block-add

您可以嘗試以下方法：

 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

這是一個可行的解決方案。 無需使用數組 。 您可以簡單地連接值。 希望能幫助到你！

 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

減少達到解決方案的方法

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)