javascript - 计算并显示组合的选择选项值

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

是的，Google 是查找您要查找的内容的好主意。

寻找 Javascript 基础知识和 jQuery 教程。 我可以推荐 Codeschool ，他们针对这些主题提供非常好的免费在线类(class)。 (需要注册，但有很多免费类(class)。)这些类(class)很有趣。它们由短视频截屏构成，之后您必须使用这些知识来通过练习。 如果您在某些时候遇到困难，总会有很好的提示来解决考试。

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

要选择选项，您可以使用 $('#first').val() 并跟踪更改，您将使用更改事件的事件处理程序 $('#first' ).on('更改', 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>