Question

这里我有一个3下拉列表，其中包含从0到9的数字，这实际上是成本输入。例如，如果我在第一个下拉列表中选择4，在第二个下拉列表中选择5在第三个下拉列表中下拉和0，然后成本应该是450.现在我要做的是，一旦我输入值并单击提交，我应该在一个变量中捕获值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

你可以试试这个：

＆＃13;

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
    }

＆＃13;

<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>

＆＃13;

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)

如何获取下拉选定值并形成数字

4 个答案: