Question

如何检查选择选项值的总和并使用javascript在另一个输入中显示它们？

<form>
    <select id="first">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select id="second">
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <input value="combined sum of select value for id='first', id='second'" type="number">
</form>

Answer 1

是的，谷歌最好找到你想要的东西。

寻找Javascript基础知识和jQuery教程。 我可以推荐Codeschool，他们正在为这些主题提供非常好的免费在线课程。（需要注册，但有很多免费课程。）这些课程很有趣。它们是在短视频截屏中构建的，之后您必须使用该知识来通过练习。如果你在某个时候陷入困境，总会有很好的提示来解决考试。

您正在寻找的内容将类似于以下脚本。

要选择您可以使用$('#first').val()的选项并跟踪更改，您将使用事件处理程序进行更改事件$('#first').on('change', function(){ ... }。

var adder = (function($){
    var first = 0;
    var second = 0;
    
    var init = function() {
        first = getOption('#first');
        second = getOption('#second');
        var result = add(first,second);
        //console.log(result); // for debugging in console of browser
        update(result);
        //console.log(first,second);
    };
    
    var getOption = function(selector) {
        return parseInt($(selector).val());
    };
    
    var add = function(a,b) {
        return a+b;
    };
    
    var update = function(value) {
        $("#result").val(value);
    };
    
    // event handlers
    $('#first').on('change', function(){
        first = getOption('#first');
        update(add(first,second));
    });
    $('#second').on('change', function(){
        second = getOption('#second');
        update(add(first,second));    
    });
                    
    return {init:init};
})(jQuery);

$(function() {
// Handler for .ready() called.
    adder.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select id="first">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select id="second">
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <input id="result" value="combined sum of select value for id='first', id='second'" type="number"/>
</form>

Answer 2

以下代码将使用JavaScript将HTML元素添加到一起。

<input type="number" id="first" value="1"></input>
    <input type="number" id="second" value="2"></input>
    <button onclick="counter()">add</button>
    <p id="display"></p>
<script>
function counter() {
        var first = Number(document.getElementById("first").value);
        var second = Number(document.getElementById("second").value);
        var x = first + second;
        document.getElementById("display").innerHTML = x;
    }
</script>

计算和显示组合选择选项值

2 个答案: