JAVASCRIPT: Bestimmung Pfad auf zwei Selektionen je

Question

ich mit Aufräumen einige Code beauftragt wurden/möglicherweise eine effizientere Weg zu gehen über die folgenden erstellen:

Es gibt zwei Auswahlboxen in einem Formular. Eine rief Programmtyp und die andere Rolle. Es gibt 4 Programmtypen und 10 Rollen. Abhängig davon, welche zwei Sie ausgewählt haben, bringt es Ihnen zwei eine bestimmte Seite.

Auch bestimmte Rollen sind nicht wählbar, abhängig vom gewählten Programmtyp. Wenn beispielsweise unter "Programmtyp" "GST" ausgewählt wurde, sind "Issue Creator", "Officer" und "Manager" nicht als Rolle auswählbar.

Ich fragte mich, ob jemand irgendwelche Vorschläge hatte, welche Art von JavaScript-Funktion ich verwenden könnte, um über diese Aufgabe zu gehen.

Answer 1

Überprüfen Sie meine Lösung. Ich bevorzuge switch-Anweisungen nicht, da sie schwerfällig werden können. Daher habe ich stattdessen einen regulären Ausdruck verwendet.

Der folgende Code ruft die Abhängigkeitsfunktion auf, wenn der Wert program-type select geändert wird. Anschließend durchläuft es jede Option des Elements select und überprüft den aktuellen Wert des Elements program-type für das Datenabhängigkeitsattribut der jeweiligen Option. Der reguläre Ausdruck prüft, ob das Attribut entweder dem Wert, einem der Werte (getrennt durch Kommas) oder einem Catch all (was ich in diesem Fall gemacht habe) 10ausgewählt wurde der regex Vergleich zu etwas für die program-type berechnen würde wie:

"1".match(/\*|1/i) // true 
"2,3".match(/\*|1/i) // false 
"*".match(/\*|1/i) // true 

wenn sie nicht übereinstimmen, habe ich die Möglichkeit, das Display auf none gesetzt - aber man konnte es nur deaktivieren, wenn Sie es vorziehen .. Alles, was du wirklich willst.

Wenn Sie reguläre Ausdrücke neu sind, würde ich regexr

Hoffnung empfehlen, das hilft.

function dependency(e){ 
 
    var roles = document.querySelectorAll('#role option') 
 
    for(var i = 0 ; i < roles.length ; i++) { 
 
    var re = new RegExp('\\*|' + e.currentTarget.value, 'i') 
 
    if(roles[i].dataset.dependency.match(re)) roles[i].style.display = 'block' 
 
    else roles[i].style.display = 'none' 
 
    } 
 
} 
 

 
document.querySelector('#program-type').addEventListener('change', function(e){ 
 
    dependency(e) 
 
})

<select id="program-type" name="program-type"> 
 
    <option value="default" disabled selected>Select Program-Type</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 
<select id="role" name="role"> 
 
    <option value="foo" data-dependency="*" disabled selected>Select role</option> 
 
    <option value="foo" data-dependency="1">foo</option> 
 
    <option value="bar" data-dependency="2,3">bar</option> 
 
    <option value="baz" data-dependency="*">baz</option> 
 
</select>