Java-скрипт для выпадающего списка выбранного изменения индекса

Question

я 2 выпадающих элементов управления и 1 текстовое поле В выпадающем списке 1 у меня есть такие значения, как 11.00,11.30,12.00,12.30,13.00, 13.30 В выпадающем списке 2 у меня есть такие значения, как 11.30,12.00,12.30,13.00, 13.30, 14.00

как только пользователь выберет значения в раскрывающемся меню 1 и в раскрывающемся списке 2, в раскрывающемся списке 2 произойдет событие, в котором будут выбраны выбранные значения из раскрывающегося списка 1 и раскрывающегося списка 2. значение dropdown1 вычитается из значения dropdown2.
если условие имеет вид 11.30 - 11.00 = .30, если .30 - результат, он должен быть показан как .50 как результат в текстовом поле. если условие имеет вид 11.00 - 10.30 = .70, если .70 - результат, он должен быть показан как .50 как результат в текстовом поле

это условие должно работать как в javascript

если кто-нибудь знает, как это сделать, помогите мне спасибо

Answer 1

добавьте 'onchange = "Calculate ()"' в раскрывающемся списке 2 добавить эту функцию JavaScript

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

}

Answer 2

По какой-то прихоти я решил, что ты хочешь посчитать разницу между двумя разами ... Не обращай на меня внимания, если это не то, что тебе нужно, но я все равно хотел сделать это. Чтобы упростить задачу, я установил значения в раскрывающемся списке на количество минут, потому что работа со временем в js может быть мучительной:

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

Answer 3

Код в jQuery без заменяющей части. Я не уверен в твоих 2 условиях. Вы хотите всегда показывать .50, если результат равен .30 или .70.

Обновлено

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