使用JavaScript的條件選項選擇字段

Question

這個問題煩我，但這裏還是全能的谷歌，我不能找到一個很好的解決辦法...

我試圖使形式與選擇字段「有條件的選項「取決於上一個問題的答案。在我的代碼下面。

首先是影響下一個有條件問題的答案（答案是一個數字）。

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

並從下一個問題的代碼與選擇選項。所以有些選項只會顯示在上一個問題中是否有最小數量。至少，這就是我想要做的...

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