javascript - 如果使用选择选项输入的数值较低或较高，则显示文本 block

Question

目标是:如果我选择更多选项，那么在输入中我必须写入>=0.008。如果我选择 LESS 选项，那么在输入中我必须写入 >=0.002 ，如果我选择其他内容，那么我必须写入 >=0.005 并显示cal-block 如果值不符合要求(否则 - 隐藏)。

因此，如果我在输入中写入所需内容，请隐藏 cal-price block 。如果在输入中写入内容后能够自动显示而无需在任何地方点击鼠标(实时)，那就太好了。

我准备了下面的代码，但它不起作用:

<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 选择器中使用了“select”，您需要使用类或 ID。