Ändern einer Auswahlliste dynamisch

Question

Ich habe ein Formular mit folgenden Funktionen:

Zweck des Formulars ist es, einen Artikelcode zu erhalten. Gegenstände sind in Kategorien eingeteilt. Zuerst werde ich eine Auswahlliste von Kategorien anzeigen. Sobald der Benutzer eine bestimmte Kategorie ausgewählt hat, werden in der zweiten Auswahlliste nur die Elemente angezeigt, die zu dieser Kategorie gehören.

zu diesem Zweck speichere ich drei Variablen.
erste Variablen enthält ein Array von ALLEN Elementen. Sie sind mit den entsprechenden Kategorien als OPTGROUP gruppiert. Das Label OPTGROUP ist die Beschreibung der Kategorie. Diese Variable ist versteckt.

Die zweite Variable ist eine Auswahlliste aller Kategorien. Das Label ist die Kategoriebeschreibung, während der Wert der Kategoriecode ist.

Die dritte Variable ist eine leere Auswahlliste, die zum Anzeigen der Elemente der ausgewählten Kategorie dient.

meine Forderung ist dies:

, wenn der Benutzer eine Kategorie auswählt, sucht i die verborgene Variable (erste - wie oben angegeben) für einen optgroup ein Etikett mit der gewählten Kategorie übereinstimmen. dann werde ich alle Optionen unter dieser Gruppe extrahieren (die die zu dieser Kategorie gehörenden Elemente darstellen) und sie an die leere Auswahlliste (die dritte, die oben beschrieben wurde) anhängen, die für Elemente gedacht ist.

Ich möchte keine AJAX- oder JSON-Option haben, weil ich denke, dass das Extrahieren und Speichern der Auswahllisten auf einmal effizienter sein kann.

bitte helfen Sie mir, die oben genannte Funktionalität mit jquery zu erreichen.

Grüße und Dank im Voraus

Answer 1

gut ich denke, der einfachste Weg, dies mit jQuery zu implementieren Selektoren verwendet, können Sie nur einen HTML erzeugen, die wie folgt aussieht:

<select id="myCategories"> 
    <option value="cat1">Category 1</option> 
    <option value="cat2">Category 2</option> 
</select> 
<select id="myItems"> 
    <option OPTGROUP="cat1">item 1</option> 
    <option OPTGROUP="cat2">item 2</option> 
    <option OPTGROUP="cat1">item 3</option> 
</select> 

und Ihren JavaScript-Code:

var $myCategories = $(select#myCategories); 
var $myItems = $(select#myItems); 
// you can start with all options hidden 
$myItems.find('option').hide(); 

myCategories.change(function() { 
// we hide all options 
    $myItems.find('option').hide(); 
// we show the categoies options 
    $myItems.find('option[OPTGROUP="' +myCategories.val()+ '"]').show(); 
}) 

ich habe diesen Code nicht testen, aber Sie geben eine Vorstellung

Answer 2

Ich habe das folgende Skript versucht, um mein Problem zu lösen und es scheint zu funktionieren

$(document).ready(function(){ 

    $("#catKey").focus(
     function() { 
     $("#itemKey").empty(); 
     $("input").css("font-style", "italic"); 
    } 
    ); 
    $("#catKey").change(onSelectChange); 
}); 


function onSelectChange() { 
    $catSelected = jQuery('#catKey option:selected').val(); 
    $("#itemKey").empty(); 
    $('#itemKeys optgroup[label= ' + $catSelected + ']').children().clone().appendTo("#itemKey"); 

    /* 
    $("#itemKey").append($('#itemKeys optgroup[label= ' + $catSelected + ']').children()); 
    */ 
}