Optionen ausblenden basierend auf der vorherigen Auswahl

Question

Ich brauche eine Hilfe mit einem Dropdown-Selektoren - Ich habe zwei Dropdown-Listen mit Preisen (Preis von und Preis bis) wo in der zweiten Dropdown-Liste muss ich jeden Preis senken oder gleich dem zuvor ausgewählten Wert deaktiviert. Kann jemand mir mit jQuery helfen, was das tun wird, bitte?

<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

Verwenden filter() und prop() zum ersten Sammlung von niedrigeren Wert Optionen in der anderen ausgewählten zu finden und dann deaktivieren sie

$('#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 wirklich bieten Einfach und Nic Die Antwort. Aber in der Zwischenzeit habe ich versucht, den folgenden Code:

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 oder mehr Details refer this fiddle