Question

我一直在寻找一段时间，但却无法通过这个来到任何地方。我需要从2个选择选项（得分1 x得分2）计算得分，然后将结果存储在隐藏字段中。这个我工作，我的问题是根据分数显示DIV。我只能触发div来显示我是否将输入更改为TEXT类型输入并手动更改...而不是以编程方式。我根据下面的实际代码汇总了一些示例代码。非常感谢您的帮助。

<form action="" name="test" id="test">
    <select name="score1" id="score1" onchange="calculate()">
        <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 name="score2" id="score2" onchange="calculate()">
        <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 type="hidden" name="totalScore" id="totalScore">

    <div class="less-than-5" style="display:none;">low score</div>
    <div class="less-than-10" style="display:none;">med score</div>
    <div class="less-than-25" style="display:none;">high score</div>

    <button type="submit">Save</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
    calculate = function()
    {
        var score1a = document.getElementById('score1').value;
        var score2a = document.getElementById('score2').value; 
        document.getElementById('totalScore').value = parseFloat(score1a).toFixed(2)*parseFloat(score2a).toFixed(2);;
   }
</script>

<script>
    $(function() {
        $("#totalScore").bind('change', function() {
            $(".less-than-5,.less-than-10,.less-than-25").hide();
            var myValue = $(this).val();
            if(myValue  <= 5){
               $(".less-than-5").show()
            } 
            else if(myValue <= 10)
            {
                $(".less-than-10").show()
            }
            else if(myValue >= 11)
            {
                $(".less-than-25").show()
            }
        });
    });

</script>

Answer 1

以编程方式更改输入时无法捕获事件。但您可以手动trigger事件。

Answer 2

为什么不把你的函数放在calculate()末尾显示div。它不需要是一个事件监听器。

        calculate = function()
        {
            var score1a = document.getElementById('score1').value;
            var score2a = document.getElementById('score2').value; 
            document.getElementById('totalScore').value = parseFloat(score1a).toFixed(2)*parseFloat(score2a).toFixed(2);;
            updateDIV();
       }

     updateDIV = function() {
                $(".less-than-5,.less-than-10,.less-than-25").hide();
                var myValue = $('#totalScore').val();
                if(myValue  <= 5){
                   $(".less-than-5").show()
                } 
                else if(myValue <= 10)
                {
                    $(".less-than-10").show()
                }
                else if(myValue >= 11)
                {
                    $(".less-than-25").show()
                }
            };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form action="" name="test" id="test">
        <select name="score1" id="score1" onchange="calculate()">
            <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>
        </select>

        <select name="score2" id="score2" onchange="calculate()">
            <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 type="hidden" name="totalScore" id="totalScore">

        <div class="less-than-5" style="display:none;">low score</div>
        <div class="less-than-10" style="display:none;">med score</div>
        <div class="less-than-25" style="display:none;">high score</div>

        <button type="submit">Save</button>
    </form>

Answer 3

更改值后使用$yourInput.trigger('change');或$(".yourInput").change();。

以下是一个示例代码段（从jquery web复制）

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

$( "#other" ).click(function() {
   $(".target").val("x")
  $( ".target" ).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <input class="target" type="text" value="Field 1">
   
</form>
<button id="other">Button</button>

根据隐藏字段中的分数显示不同的div

3 个答案: