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

管理以这种方式排序

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

Answer 3

请参阅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");
    });
});

根据输入值选择选项值

3 个答案: