[英]How can i get the drop down selected values and form an number
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. 在这里,我有3个下拉列表,其中包含0到9之间的数字,这实际上是用于成本输入的。例如,如果我在第一个下拉列表中选择
4
,在第二个下拉列表中选择5
,在第三个下拉列表中选择0
,则成本应该是450。现在我想做的是,一旦输入值并单击Submit,我应该将值450捕获到一个变量中并将其转换为整数。 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: 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)
})
}
You have used wrong class
name. 您使用了错误的
class
名。 It should be .cost-block-add
它应该是
.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>
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>
JQuery 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);
}
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.