java script for a drop down selected index change
Question
i 2 Dropdown controls and 1 text box In drop down1 one i have the values like 11.00,11.30,12.00,12.30,13.00, 13.30 In drop down2 one i have the values like 11.30,12.00,12.30,13.00, 13.30, 14.00
once the user selects the values in drop down 1 and drop down 2 an event will fires in drop down 2. where the selected vales from drop down 1 and drop down 2 are taken. the dropdown1 value is subtracted from dropdown2 value .
if condition comes like 11.30 - 11.00= .30 if .30 is the result it should be shown as .50 as a result in text box if condition comes like 11.00 - 10.30= .70 if .70 is the result it should be shown as .50 as a result in text box
this condition should as work in javascript
if any one know s how to do it, help me out thank you
3 answers
solution1
1 2009-09-17 10:12:59
add 'onchange="calculate()"' in your dropdown 2 add this javascript function
function calculate()
{
var dropdown1 = document.getElementById('dropdown1')
var dropdown2 = document.getElementById('dropdown1')
var textbox = document.getElementById('textbox')
var a = dropdown1.options[dropdown1.selectedIndex]
var b = dropdown2.options[dropdown2.selectedIndex]
if((a -b) == what ever you want)
textbox.value = what ever you want
else if((a -b) == what ever you want)
textbox.value = what ever you want
}
solution2
0 2009-09-17 10:26:41
Code in jQuery without the replacing part. I am not sure about your 2 conditions. do you want to always show .50 if the result is .30 or .70.
Updated
<script>
$(document).ready ( function () {
$("#sel1").change ( function () {
CalcResult ();
});
$("#sel2").change ( function () {
CalcResult ();
});
function CalcResult ()
{
var resultVal = parseFloat ( $("#sel2 option:selected").val() ) - parseFloat ( "#sel1 option:selected").val() );
var resultVal = $("#sel2 option:selected").val() - $("#sel1 option:selected").val();
resultVal = resultVal.toFixed("2").toString().replace ( ".30" , ".50" ).replace(".70" , ".50" );
$("#txt1").val(resultVal.toFixed("2"));
}
});
</script>
<body>
<select id="sel1">
<option value="11.00">11.00</option>
<option value="11.30">11.30</option>
<option value="12.00">12.00</option>
<option value="12.30">12.30</option>
<option value="13.00">13.00</option>
<option value="13.3">13.30</option>
</select>
<select id="sel2">
<option value="11.30">11.30</option>
<option value="12.00">12.00</option>
<option value="12.30">12.30</option>
<option value="13.00">13.00</option>
<option value="13.30">13.30</option>
<option value="14.00">14.0</option>
</select>
<input type="text" id="txt1" />
</body>
solution3
0 ACCPTED 2009-09-17 11:14:04
On a bit of a whim I decided that you want to calculate the difference between two times... Ignore me if it's not what you're after but I fancied doing it anyway. To make it easier I set the values in the drop downs to number of minutes cos working with time in js can be a ball ache:
<script type="text/javascript">
$(document).ready(function() {
//Calculate the difference when second ddl changes
$("#ddl2").change(function() {calculateTimeDiff();});
});
function calculateTimeDiff() {
//get the values
var time1 = $("#ddl1").val();
var time2 = $("#ddl2").val();
//check everything is in the right state to do the calc
if(time1 > time2) {
alert("time 1 must be before time 2");
}
else {
//get the number of mins difference
var minsDiff = (time2 - time1);
//remove number of hours (60 min chunks)
minsDiff = minsDiff % 60;
//get hours difference
var hoursDiff = time2 - time1 - minsDiff;
//if more than none, get the no of whole hours
if (hoursDiff > 0) {
hoursDiff = hoursDiff/60;
}
//format mins diff
if(minsDiff == 0) { minsDiff = "00"};
//add it to text box
$("#text1").val(hoursDiff + ":" + minsDiff);
}
}
</script>
<div id="example">
<select id="ddl1">
<option value="600">10:00</option>
<option value="630">10:30</option>
<option value="660">11:00</option>
<option value="690">11:30</option>
<option value="720">12:00</option>
</select>
<select id="ddl2">
<option value="630">10:30</option>
<option value="660">11:00</option>
<option value="690">11:30</option>
<option value="720">12:00</option>
<option value="750">12:30</option>
</select>
<input type="text" id="text1" />
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.