Tutorial :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


Solution:1

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>  


Solution:2

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    }  


Solution:3

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>   

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »