Question

我目前有两个下拉框，我想这样做，以便当用户选择第二个框时，它运行onChange方法并将值与第一个下拉框的值相加。

示例：

<select class="form-control" id="dropbox1" changeHiddenInput()">
<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>
</select>

<select class="form-control" id="dropbox2" changeHiddenInput()">
<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>
</select>
<input id="submitbutton" type="submit" class="btn btn-primary" style="margin-top: 5px" name="btnLogin" value="" />

这就是我在javascript中所拥有的内容，但它无效。

    function changeHiddenInput() {
    var dropdown1 = document.getElementById('dropdown1').value;
    var dropdown2 = document.getElementById('dropdown2').value;
    console.log(dropdown1);
    console.log(dropdown2);
    var var1 = parseInt(dropdown1);
    var var2 = parseInt(dropdown2);
    var a = var1+var2;
    document.getElementById('submitbutton').value= a;
}

如果选择1和2。它会将按钮的值更改为3。

谢谢！

Answer 1

document.getElementById('dropbox2').onchange= function(){
    var val1=document.getElementById('dropbox1').value;
    var val2=document.getElementById('dropbox2').value;
    document.getElementById('submitbutton').value=parseInt(val1)+parseInt(val2);
}

Answer 2

使用以下HTML和脚本

<select class="form-control" id="dropbox1" >
<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>
</select>

<select class="form-control" id="dropbox2" onchange="addDb()">
<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>
</select>

<input id="submitbutton" type="submit" class="btn btn-primary" style="margin-top: 5px" name="btnLogin" value="" />

<script>
function addDb() {
     var val1=document.getElementById('dropbox1').value;
    var val2=document.getElementById('dropbox2').value;
    document.getElementById('submitbutton').value=parseInt(val1)+parseInt(val2);
}
</script>

这是 FiddleDemo

Answer 3

错误仅在您的html代码中。 call changeHiddenInput function with onchange event in dropdown

<强> HTML

<select class="form-control" id="dropbox1" >
<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>
</select>

<select class="form-control" id="dropbox2" onchange ="changeHiddenInput();">
<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>
</select>
<input id="submitbutton" type="submit" class="btn btn-primary" style="margin-top: 5px" name="btnLogin" value="" />

Java脚本

<script>
    function changeHiddenInput()
    {
      var val1 = document.getElementById('dropbox1').value;
      var val2 = document.getElementById('dropbox2').value;
      document.getElementById('submitbutton').value=parseInt(val1)+parseInt(val2);
    }
</script>

获取下拉框的值并添加它们

3 个答案: