计数并显示组合的选择选项值

Count and Display Combined Select Option Values

本文关键字：选择 选项 组合 显示      更新时间：2023-09-26

您将如何使用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>

是的，谷歌是一个好主意，可以找到你要找的东西。

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

下面的代码将使用 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>
相关文章：