[英]Show different div based on score in hidden field
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.
我需要从2个选择选项(分数1 x分数2)计算分数,然后将结果存储在隐藏字段中。 This I working, the issue I have is displaying a DIV based on the score.
我正在工作,我遇到的问题是根据得分显示DIV。 I can only trigger the divs to show if I change the input to a TEXT type input and change it manually...not programatically.
如果将输入更改为TEXT类型输入并手动更改,则只能触发div以显示,而不能以编程方式更改。 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>
以编程方式更改输入时无法捕获事件,但可以手动触发事件。
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()
的末尾呢?它不必是事件侦听器。
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>
Use $yourInput.trigger('change');
使用
$yourInput.trigger('change');
Or $(".yourInput").change();
或
$(".yourInput").change();
after you've changed the value. 更改值后。
Here is an example snippet (copied from jquery
web) 这是一个示例片段(从
jquery
网站复制)
$( ".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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.