前の選択に基づいてオプションを非表示にする

Question

ドロップダウンセレクタのヘルプが必要です - 2番目のドロップダウンで価格を下げる必要がある価格（価格と価格）の2つのドロップダウンリストがありますまたは以前に選択された値と同じになります。誰かがjQueryを手伝ってくれるの？

<select>  
 
    <option style="display:none" selected value="0">Set minimal price</option> 
 
    <option value="0.01">0</option> 
 
    <option value="500">500</option> 
 
    <option value="1000">1000</option> 
 
    <option value="1500">1500</option> 
 
    <option value="2000">2000</option> 
 
    <option value="2500">2500</option> 
 
</select> 
 

 
<select>  
 
    <option style="display:none" selected value="0">Set maximal price</option> 
 
    <option value="500">500</option> 
 
    <option value="1000">1000</option> 
 
    <option value="1500">1500</option> 
 
    <option value="2000">2000</option> 
 
    <option value="2500">2500</option> 
 
    <option value="3000">3000</option> 
 
</select>

Answer 1

使用filter()とprop()は、最初の他の選択に低い値オプションのコレクションを検索し、それらを

$('#p-min').change(function(){ 
 
    var minVal = +$(this).val(); 
 
    // enable all, filter lower or equal ones and disable them 
 
    $('#p-max option').prop('disabled', false).filter(function(){ 
 
    return +this.value <= minVal; 
 
    }).prop('disabled', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="p-min" size="6">  
 
    <option style="display:none" selected value="0">Set minimal price</option> 
 
    <option value="0.01">0</option> 
 
    <option value="500">500</option> 
 
    <option value="1000">1000</option> 
 
    <option value="1500">1500</option> 
 
    <option value="2000">2000</option> 
 
    <option value="2500">2500</option> 
 
</select> 
 

 
<select id="p-max" size="6">  
 
    <option style="display:none" selected value="0">Set maximal price</option> 
 
    <option value="500">500</option> 
 
    <option value="1000">1000</option> 
 
    <option value="1500">1500</option> 
 
    <option value="2000">2000</option> 
 
    <option value="2500">2500</option> 
 
    <option value="3000">3000</option> 
 
</select>

Answer 2

@charlietflが本当に提供を無効にしますシンプルとニック答え。

HTML

<select name="minval" class="minvalue"></select> 
<select name="maxval" class="maxvalue"></select> 

SCRIPT

$(function(){ 
    var _price = ["0","500","1000","1500","2000","2500","3000"]; 

    var options  = ''; 
    for(var i = 0;i<_price.length;i++){ 
     options +='<option value="'+_price[i]+'">'+number_format(_price[i],'&pound;')+'</option>'; 
    } 
    jQuery('[name="minval"]').html('<option value="0">Set minimal price</option>'+options); 
    jQuery('[name="maxval"]').html('<option value="0">Set maximal price</option>'+options); 


    // Change on min price 
    jQuery('body').on('change','[name="minval"]',function(){ 
     var optionss  = ''; 
     var _selected_val = jQuery(this).find(":selected").val(); 
     var indexx   = jQuery.inArray(_selected_val,_price); 

     for(var j = indexx+1;j<_price.length;j++){ 
      optionss +='<option value="'+_price[j]+'">'+number_format(_price[j],'&pound;')+'</option>'; 
     } 
     jQuery('[name="maxval"]').html('<option value="0">No Max</option>'+optionss); 
    }) 
}) 
function number_format(n, currency) { 
    return currency + " " + n.replace(/./g, function(c, i, a) { 
     return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c; 
    }); 
} 

Answer 3

$(document).ready(function() { 
 
\t $("#selectFrom").change(function(){ 
 
\t \t \t $('#selectto option').each(function (j, option1) { 
 
     if (option1.value >= $("#selectFrom option:selected").val()) { 
 
      $(this).prop('disabled', false); 
 
     }else{  \t \t 
 
      $(this).prop('disabled', true); 
 
     } 
 
    }); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="selectFrom">  
 
    <option style="display:none" selected value="0">Set minimal price</option> 
 
    <option value="0">0</option> 
 
    <option value="500">500</option> 
 
    <option value="1000">1000</option> 
 
    <option value="1500">1500</option> 
 
    <option value="2000">2000</option> 
 
    <option value="2500">2500</option> 
 
</select> 
 

 
<select id="selectto">  
 
    <option style="display:none" selected value="0">Set maximal price</option> 
 
    <option value="500">500</option> 
 
    <option value="1000">1000</option> 
 
    <option value="1500">1500</option> 
 
    <option value="2000">2000</option> 
 
    <option value="2500">2500</option> 
 
    <option value="3000">3000</option> 
 
</select>

F：しかし、一方で、私は次のコードを試してみましたまたはそれ以上の詳細refer this fiddle