使用選擇選項在輸入中數值小於或等於大時顯示文本塊

Question

目標是：如果我選擇MORE選項，那么在輸入中我必須寫>=0.008 。 如果我選擇LESS選項，那么在輸入中我必須寫>=0.002 ，如果我選擇其他東西，那么我必須寫>=0.005並在值不符合要求時顯示cal-block （否則-隱藏）。

因此，如果我在輸入中寫了什么，請隱藏cal-price塊。 如果它能在輸入內容后自動顯示，而無需在任何地方單擊鼠標（實時），那會很好。

我准備了下面的代碼，將無法正常工作：

<select>
  <option value="MORE">More</option>
  <option value="LESS">Less</option>
  <option value="OTHER">Other</option>
</select>


<div class="cal-price">The price is too low</div>
<input type="text" class="check-price-js" value="0.005"/>

<script>
if($('MORE').val()is active){
  $('input.check-price-js').on('change', function(){
    if($(this).val()>=0.008){
      $('div.cal-price').css('display', 'none');
    } elseif {
      $('div.cal-price').css('display', 'block');
    });
} elseif ($('LESS').val()is active){
  $('input.check-price-js').on('change', function(){
    if($(this).val()>=0.002){
      $('div.cal-price').css('display', 'none');
    } elseif {
      $('div.cal-price').css('display', 'block');
    });
} else {
  $('input.check-price-js').on('change', function(){
  if($(this).val()>=0.005){
    $('div.cal-price').css('display', 'none');
  } elseif {
    $('div.cal-price').css('display', 'block');
  });
}
</script>

<style>
.cal-price {
  display: none;
}
</style>

Answer 1

SELECT選項更改並獲取所選選項的值時，此代碼將觸發

$('select').on('change', function() {
  var selected = $("select option").filter(":selected").val();
})

selected值后，就可以使用它進行任何測試/檢查。 注意：我剛剛在jQuery選擇器中使用了“選擇”，您將想使用類或ID。