javascript - 即使我按下退格键/删除键，该功能仍保持事件状态。并在加载页面时获取选择的值

Question

我想知道如何使我的函数仍然处于事件状态，即使我按下退格/删除它仍然可以工作，而且我想获取我的函数的 select 值。这将取决于我的 select

的值

这是我的代码:

    <label class="control-label" for="discountType">Type</label>
            <div class="controls" > 
                <select id="discountType" name="discountType" class="span10" required> 
                    <option value="PR">Percentage</option>
                    <option value="P">Peso Value</option>
                </select>
            </div>

        <label class="control-label" for="discountValue">Discount Value</label>
            <div class="controls"> 
                <input type="text" id="discountValue" name="discountValue" maxlength="3" placeholder="numbers and decimals only" class="span10" required><br>
                <span id="value-min" style="text-align: right; color: red; width: 250px; text-align: left; font-size: 12px;"></span> 
            </div>

这是我的脚本:

$(document).ready(function(){

$("#discountType").on("ready",function(){
   var disType = $("#discountType").val();
   if (disType == "PR"){
       $("#discountValue").on("keyup",function(){
      var disval = $("#discountValue").val();
      if (disval.trim().length >= 3){
          $("#value-min").html("<span> Discount value cannot be larger than 99 if discount type is PERCENTAGE</span>");
       }else{
           $("#value-min").hide()/*html("")*/;
       }
  });

   }else{
     $("#value-min").hide()/*html("")*/;
   }

 });
});

但它不起作用。

Answer 1

实际上，您也可以在该跨度上使用普通的隐藏/显示并首先放置该值。示例:

<label class="control-label" for="discountType">Type</label>
<div class="controls" >
    <select id="discountType" name="discountType" class="span10" required>
        <option value="PR">Percentage</option>
        <option value="P">Peso Value</option>
    </select>
</div>

<label class="control-label" for="discountValue">Discount Value</label>
<div class="controls">
    <input type="text" id="discountValue" name="discountValue" maxlength="3" placeholder="numbers and decimals only" class="span10" required><br>
    <span id="value-min" style="text-align: right; color: red; width: 250px; text-align: left; font-size: 12px; display: none">
        Discount value cannot be larger than 99 if discount type is PERCENTAGE
    </span>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('#discountValue').on('keyup focus', function(e){
        var value = $('#discountValue').val();
        var disType = $("#discountType").val();
        if(disType == 'PR' && value > 99) {
            $('#value-min').show();
        } else {
            $('#value-min').hide();
        }
    });
});
</script>