即使我按下退格键/删除键,仍保持该功能处于活动状态.以及在加载页面时获取select的值


Keeping the function active even if I pressed backspace/delete. And getting the value of a select when I load the page

我想知道如何使我的函数仍然处于活动状态,即使我按了退格键/删除键,它仍然可以工作,而且我还想获得函数的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("")*/;
   }
 });
});

但它不起作用。

实际上,您也可以在该span上使用纯隐藏/显示,并将值初始放置。示例:

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