Выберите значение опциона на основе входного значения

Question

У меня есть форма продажи длины кабеля, есть одна цена для длин (5 - 95 м) и вторая для (100-200 м). Исходя из длины, помещенной в поле ввода, я хотел бы, чтобы в раскрывающемся меню была выбрана правильная цена. Какой javascript мне нужен для этого.

<select id="leaveCode" name="leaveCode"> 
    <option value="0" selected="selected">Price Option</option> 
    <option value="5.83">5 to 95m - £5.83</option> 
    <option value="5.00">100 to 200m - £5.83</option> 
</select> 

Length required: 
<input type="number" id="length" size="4" maxlength="5" min="5" max="200" step="5"> 

<input type="button" value="Calculate"> 

Любая помощь будет оценена по достоинству.

Благодаря

Answer 1

См http://jsfiddle.net/mpv1e72j/, чтобы решить эту проблему с JQuery

$(document).ready(function(){ 
    $("#length").change(function(){ 
     var len = Number($("#length").val()); 
     if (len >= 5 && len <= 95) $("#leaveCode").val("5.83"); 
     if (len >= 100 && len <= 200) $("#leaveCode").val("5.00"); 
    }); 
}); 

Answer 2

Я добавил функцию в моем демо для расчета на изменения и на кнопку мыши. Удачи!

http://jsfiddle.net/vL1a4sdu/

<select id="leaveCode" name="leaveCode"> 
     <option value="0" selected="selected">Price Option</option> 
     <option value="5.83">5 to 95m - £5.83</option> 
     <option value="5.00">100 to 200m - £5.83</option> 
</select> 

Length required: 
<input type="number" id="length" size="4" maxlength="5" min="5" max="200" step="5"> 
<input id="calculate" type="button" value="Calculate"> 

<div id="cost"></div> 

<script> 

    $('#leaveCode').change(function(){ 
     var price = $(this).val(); 
     var length = $("#length").val(); 
     if (length) { 
      var cost = calculate(price, length); 
      $("#cost").text(cost); 
     } 
    }); 

    $('#calculate').click(function(){ 
     var price = $("#leaveCode").val(); 
     var length = $("#length").val(); 
     if (price !== null && length !== null) { 
      var cost = calculate(price, length); 
      $("#cost").text(cost); 
     } 
    }); 

    function calculate(price,length) { 
     var cost = price*length; 
     return cost; 
    } 

</script> 

Answer 3

Успели сортировать это таким образом

<select id="dropdown" name="dropdown"> 
<option value="0" selected="selected">Price Option</option> 
<option value="5.83">5 to 95m - £5.83</option> 
<option value="5.00">100 to 200m - £5.83</option> 
</select> 

Length required: 
<input type="number" id="length" size="4" maxlength="5" min="5" max="200" step="5" onblur="quickSelect()"> 

<input type="button" value="Calculate" onClick="quickSelect()"> 

Javascript

<script type="text/javascript"> 
function quickSelect() { 
     var len = Number($("#length").val()); 
    if (len >= 5 && len <= 95) { 
      document.form.dropdown[1].selected = "1" 
     } 
     if (len >= 100 && len <= 200) { 
      document.form.dropdown[2].selected = "1" 
     } 
} 

</script>