将 Javascript 用于条件选项 select 字段

Question

这个问题困扰着我，但我在这里或全能的网站上都找不到好的解决方案Google...

我正在尝试根据上一个问题的答案制作一个带有 select 字段和 "conditional options" 的表单。在我的代码下面。

影响下一个条件问题的第一个问题（答案是一个数字）。

<div class="formblock">
<label class="screen-reader-text">Total sales</label>
<input type="number" name="sales" id="sales" value="">
<?php if($salesError != '') { ?>
        <span class="error"><?php echo $salesError;?></span> 
    <?php } ?>
    </div>

接下来 Javascript 测试答案并显示下一个问题的选项。

    <script>

    jQuery(function($) {
    $('#sales').bind('change', function (e) { 
    //if( $('#sales').val() == "") {
    // $('#150, #250, #500, #750, #1000, #1500').hide();
    //}
     if( $('#sales').val() > '150' ) {
    $('#150').show();
    }
     if( $('#sales').val() > '250'  ) {
    $('#250').show();
    }
     if( $('#sales').val() > '500'  ) {
    $('#500').show();
    }
     if( $('#sales').val() > '750'  ) {
    $('#750').show();
    }
     if( $('#sales').val() > '1000'  ) {
    $('#1000').show();
    }
     if( $('#sales').val() > '1500'  ) {
    $('#1500').show();
    }
    if( $('#sales').val() == '0'  ) {
    $('#150, #250, #500, #750, #1000, #1500').hide();
    }
    else{
    $('#150, #250, #500, #750, #1000, #1500').hide();
    } }); 
}); 
</script>

以及带有 select 选项的下一个问题的代码。所以有些选项只显示是否在上一个问题中输入了最低金额。至少，这就是我想要完成的...

 <div class="formblock-conditional">
<label class="screen-reader-text">Present</label>
<select class="select" name"present" id="present" >
<option value="" class="txt requiredField" selected="selected">No present</option>
<option id="150" value="" class="txt requiredField" >Present 1</option>
<option id="250" value="" class="txt requiredField" >Present 2</option>
<option id="500" value="3" >Present 3</option>
<option id="750" value="4" >Present 4</option>
<option id="1000" value="5" >Present 5</option>
<option id="1500" value="6" >Present 6</option>
</select>
    </div>

Answer 1

有几个问题。我简化了一点

var presents = {"Present 1":150,"Present ABC":250,"Gutschein 1":500,"Gutschein 2":750,"Gutschein 3":1000,"Gutschein 4":1500}
$(function() {
  $('#sales').on('keyup', function(e) {
    $("#present").get(0).length=1;
    var sale = this.value;
    $.each(presents,function(key,val) {
      if (sale >= val) {
        $("#present").append('<option value="'+val+'">'+key+'('+val+')</option>');
      }  
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formblock">
  <label class="screen-reader-text">Total sales</label>
  <input type="number" name="sales" id="sales" value="">
</div>

<div class="formblock-conditional">
  <label class="screen-reader-text">Present</label>
  <select class="select" name "present" id="present" class="requiredField">
    <option value="" selected="selected">No present</option>
  </select>
</div>

将 Javascript 用于条件选项 select 字段

Using Javascript for conditional options select field

javascript

forms

conditional