Question

这个问题困扰着我，但我无法在这里或全能的Google上找到一个好的解决方案......

我尝试使用＆＃34;条件选项＆＃34;制作带有选择字段的表单。取决于前一个问题的答案。在我的代码下面。

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

<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作为条件选项选择字段

1 个答案: