Show different div based on score in hidden field

Question

I have been searching around for some time but cannot get anywhere with this one. I need to calculate the score from 2 select options (score1 x score2) and then store the result in a hidden field. This I working, the issue I have is displaying a DIV based on the score. I can only trigger the divs to show if I change the input to a TEXT type input and change it manually...not programatically. I have pulled together some sample code based on my actual code below. Your help would be very much appreciated.

<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

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

Answer 2

Why not just put your function to show the divs at the end of calculate() It doesn't need to be an event listener.

  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

Use $yourInput.trigger('change'); Or $(".yourInput").change(); after you've changed the value.

Here is an example snippet (copied from 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>