2016-10-03 7 views
0

Ich habe 2 Auswahlfelder, wobei das zweite eine Teilmenge aller Optionen basierend auf der Kategorie in der ersten Box zeigt. Das zweite Feld enthält IDs und Namen, wobei der Optionswert der ID entspricht. Ich habe bereits die IDs herausgefiltert, an denen ich interessiert bin, und sie in einem Array haben. Dies ändert sich jedes Mal und kann verschiedene Größen haben (Filtern aller Benutzer nach Gruppen). Was ich tun möchte, ist einen Klon der kompletten Optionen zu nehmen und dann nur diejenigen zu zeigen, deren ID (oder Wert) vorhanden ist. Vergleichen Sie daher das Array der gefilterten Werte mit dem vollständigen Satz. Ich habe ein paar Möglichkeiten gesehen, Optionen zu entfernen, aber die meisten waren nur für einen Wert oder für feste Werte, also passte es nicht genau, was ich brauche, und ich kann mir nicht vorstellen, wie ich diesen letzten Schritt machen soll! Sieht wie folgt aus:So entfernen Sie mehrere Auswahloptionen basierend auf dynamischem Wert

<select id = 'doctor_select' > 
<option value = '1' > John Doe </option> 
<option value = '2' > Jane Doe </option> 

.... etc

edit: jetzt gelöst, indem alle versteckt und diejenigen zu ermöglichen, für jede Schleife zu tun was ich brauche.

+0

Versuchen Sie IDs zu Optionen zuzuordnen? Sie möchten nur die Optionen anzeigen, die mit der ID übereinstimmen? Wie würden Sie sagen, ist der Optionswert mit ID verbunden? –

+0

Die Werte sind bereits die Benutzer-ID und es wird ihr Name angezeigt. Das Array der gefilterten Benutzer enthält alle IDs in der Gruppe, die gerade durchsucht wird. Daher möchte ich nur diese Optionen aus der Gesamtliste anzeigen. – nick

+0

wo ist das Array? Objektiv ist immer noch nicht sehr klar entweder – charlietfl

Antwort

1

Ich würde es nicht so machen, aber Sie könnten die ursprüngliche Kombination klonen und einfach die unnötigen Optionen aus dem DOM entfernen. Etwas wie:

var newDoctorSelect=$("#doctor_select").clone(); 
$(newDoctorSelect).children("option").each(function() { 
    if(some condition) $(this).remove(); 
}); 
$("#somewhere").append(newDoctorSelect); 

Aber ich würde empfehlen, entweder mit AJAX oder die Optionen in einem Objekt zu speichern und die Auswahlbevölkern, wenn nötig.

var optionsByCategory={ 
    "1":{"1":"One","3":"Three"}, 
    "2":{"2":"Two"} 
}; 

$("#categorySelect").on("change",function() { 
    var options=optionsByCategory[$(this).val()]; 
    //OR some AJAX call to retreive the options from the server instead 
    $("#doctor_select option").remove(); 
    for(var k in options) $("#doctor_select").append($("<option>").val(k).text(options[k])); 
}); 
0

Sie können dies tun:

var options = getElementsByTagName("option"), 
    elem, 
    length = options.length; 

for (var i = 0; i<length; i++) { 
    if (!((elem = options[i]).value === IDYouWantToMatch)); elem.parentNode.removeChild(elem); 
} 
0

Ich glaube, Sie so etwas wie das wollen folgende Verwendung filter()

var $sel = $('#doctor_select'), 
    $opts = $sel.children(); 

var $filteredOpts = $opts.clone().filter(function(){ 
    return someArray.indexOf(this.value)>-1; 
}) 
$sel.empty().append($filteredOpts); 

Die gespeicherte $opts kann nun wiederverwendet Zukunft werden Änderungen

Verwandte Themen