Verwenden von jQuery Auserwähltes, um Optionen basierend auf einer vorherigen Auswahl einzuschränken

Question

Ich habe zwei Auswahloptionen wie unten angegeben.

<div class="wrapper"> 
    <select id="industrySelect" class="chosen-industry-select" data-placeholder="select industry" multiple> 
    <option value=""></option> 
    <option value="1">Business</option> 
    <option value="2">Education</option> 
    <option value="3">Healthcare</option> 
    </select> 

    <select id="verticalMarketSelect" class="chosen-verticalMarket-select" data-placeholder="select vertical market" multiple> 
    <option value=""></option> 
    <option value="1" industryValue="1">Retail</option> 
    <option value="2" industryValue="1">Construction</option> 
    <option value="3" industryValue="1">Automotive</option> 
    <option value="4" industryValue="2">University</option> 
    <option value="5" industryValue="2">Elementary School</option> 
    <option value="6" industryValue="2">High School</option> 
    <option value="7" industryValue="3">Hospital</option> 
    <option value="8" industryValue="3">Doctor Office</option> 
    <option value="9" industryValue="3">Dentist</option> 
    </select> 
</div> 

Die industryValue ist einfach ein Attribut I für Filterzwecke erstellt, wie die Informationen für die Auswahl von zwei verschiedenen SQL-Tabellen gezogen werden. industryValue bezieht sich direkt auf den Wert wie für verticalMarketSelect in den Optionen festgestellt (dh industryValue = „1“ auf eine Auswahl von Geschäfts mit einem Wert von 1.

Was ich versuche zu tun ist, um nur beziehen würde Optionen in der verticalMarketSelect wenn die entsprechende Option aus dem industrySelect oben ausgewählt wenn keine Optionen ausgewählt werden, werden die Optionen für verticalMarketSelect nicht sichtbar sein sollte

EDIT:.. ich sehr wichtige Information vergessen: I verwende das jQuery Chosen Plugin mit beiden Selects mehrere Auswahlen sein.

EDIT: Ich fand einige jQuery von einer ähnlichen Implementierung, aber es scheint nicht für meine Bedürfnisse zu arbeiten.

jQuery('#industrySelect').chosen().change(function() { 
    var selected = []; 
    jQuery('#industrySelect').find("option").each(function() { 
    if (this.selected) { 
     selected[this.value] = this; 
    } 
    }) 
    .each(function() { 
    this.disabled = selected[this.value] && selected[this.value] !== this; 
    }); 
    jQuery('#verticalMarketSelect').trigger("chosen:updated"); 
}); 

Answer 1

konnte ich diese Arbeit bekommen und wollte sicher sein, die Antwort für alle anderen, die wollen schreiben kann etwas ähnliches in der Zukunft realisieren. Danke an alle für Ihre Hilfe!

jQuery('#industrySelect').chosen().change(function() { 
 
    var industrySelected = jQuery(this).chosen().val(); 
 
    var $verticalMarket = jQuery('select#verticalMarketSelect'); 
 
    var $verticalMarketHolder = jQuery('select#verticalMarketHolder'); 
 
    if (industrySelected == null) { 
 
    $verticalMarket.empty(); 
 
    } else { 
 
    $verticalMarket.find('option.existing').removeClass('existing'); 
 
    jQuery.each(industrySelected, function(index, value) { 
 
     $verticalMarket.find('[industry="' + value + '"]').addClass('existing'); 
 
    }); 
 
    $verticalMarket.find('option').not('.existing').remove(); 
 
    jQuery.each(industrySelected, function(index, value) { 
 
     var option = $verticalMarketHolder.find('[industry="' + value + '"]').clone(); 
 
     var existingOptions = $verticalMarket.find('[industry="' + value + '"]'); 
 
     if (existingOptions.length == 0) { 
 
     $verticalMarket.append(option); 
 
     } 
 
    }); 
 
    } 
 
    jQuery('#verticalMarketSelect').trigger('chosen:updated'); 
 
}); 
 
jQuery(function() { 
 
    jQuery('#industrySelect').trigger('change'); 
 
});

<div class="wrapper"> 
 
    <select id="industrySelect" class="chosen-industry-select" data-placeholder="select industry" multiple> 
 
    <option value=""></option> 
 
    <option value="1">Business</option> 
 
    <option value="2">Education</option> 
 
    <option value="3">Healthcare</option> 
 
    </select> 
 

 
    <select id="verticalMarketSelect" class="chosen-verticalMarket-select" data-placeholder="select vertical market" multiple> 
 
    <option value=""></option> 
 
    <option value="1" industryValue="1">Retail</option> 
 
    <option value="2" industryValue="1">Construction</option> 
 
    <option value="3" industryValue="1">Automotive</option> 
 
    <option value="4" industryValue="2">University</option> 
 
    <option value="5" industryValue="2">Elementary School</option> 
 
    <option value="6" industryValue="2">High School</option> 
 
    <option value="7" industryValue="3">Hospital</option> 
 
    <option value="8" industryValue="3">Doctor Office</option> 
 
    <option value="9" industryValue="3">Dentist</option> 
 
    </select> 
 
</div>

Answer 2

Normalerweise könnten Sie .hide() für diese, aber es scheint, dass <option> Elemente versteckt nicht in jedem Browser funktioniert, so dass Sie zunächst die vollständige Liste speichern müssen, dann die Elemente entfernen, die nicht entsprechen, Ihre Anfrage und die .html() des <select> gesetzt:

var originalValues; 
$('#industrySelect').change(function() { 
    if (!originalValues) { 
     originalValues = {}; 
     $('#verticalMarketSelect').children().each(function() { 
     var industryValue = $(this).attr('industryValue'); 
      if(!(industryValue in originalValues)){ 
      originalValues[industryValue] = []; 
     } 
     originalValues[industryValue].push([$(this).val(), $(this).html()]); 
     }); 
    } 

    $('#verticalMarketSelect').empty(); 
    for(var x in originalValues[$('#industrySelect').val()]){ 
     var v = originalValues[$('#industrySelect').val()][x]; 
    $('#verticalMarketSelect').append('<option value="'+v[0]+'">' + v[1] + '</option>'); 
    } 

}); 

Answer 3

HTML:

<div style="display:none;" id = "sublist"> 
    <option value="1" industryValue="1">Retail</option> 
    <option value="2" industryValue="1">Construction</option> 
    <option value="3" industryValue="1">Automotive</option> 
    <option value="4" industryValue="2">University</option> 
    <option value="5" industryValue="2">Elementary School</option> 
    <option value="6" industryValue="2">High School</option> 
    <option value="7" industryValue="3">Hospital</option> 
    <option value="8" industryValue="3">Doctor Office</option> 
    <option value="9" industryValue="3">Dentist</option> 
</div> 

Javascript:

$('#industrySelect').change(function(){ 
     $('#verticalMarketSelect').empty(); 
     $('#verticalMarketSelect').append($('#sublist').find('option[industryValue="' + $(this).val()+'"]')); 

}); 

Hier ist die DEMO