In Javascript, wie Listbox-Element (von HTML) aus einer Listbox, die möglicherweise nicht vorhanden ist

Question

Ich wurde einige Code von einem früheren Mitarbeiter übergeben und müssen einige Updates, vor allem in Bezug auf Eingabe Validierung.

Ich bin sehr viel ein Anfänger bei HTML und Javascript.

Das Formular ermöglicht Benutzern das Hinzufügen von Zeilen über eine Schaltfläche. Diese Schaltfläche erstellt in Wirklichkeit nur ein Listenfeld, in dem Benutzer ein zusätzliches Element auswählen können. Viele Zeilen können hinzugefügt werden, aber stellen wir uns vor, dass sie auf 3 Listenfelder für diese Frage beschränkt ist. Dies wird im HTML-Code behandelt.

Basierend auf einer anderen Auswahl auf dem Formular, einige der Listenfeld-Option wird nicht erlaubt, und ich möchte eine Nachricht auswerfen, wenn der Benutzer das Formular ändern muss.

Das Problem kommt von mir überprüfen Listenfeld Auswahl für eine variable Anzahl von Listenfeldern. Hier ist ein Beispiel-Code zu vereinfachen, was ich versuche zu fragen:

HTML:

(nur der Tabellenteil hier, der Rest scheint in Ordnung)

<select name="type1" id="type1"> 
    <option value="option1">Option1</option> 
    <option value="option2">Option2</option> 
    <option value="option3">Option3</option> 
</select> 

(Der Code für das Hinzufügen eine Zeile von der Schaltfläche click ist hier, aber das scheint auch zu laufen.Neue Tabellen hinzugefügt werden in einer Javascript-Datei erstellt und der Name und der Typ werden jedes Mal um 1 erhöht (Typ2, dann Typ 3, etc).)

javascript:

function validate_form() 
{ 
    //other options 

    var Table1=document.getElementById("type1"); //This will always exist 
    var Table2=document.getElementById("type2"); //This may not exist 
    var Table3=document.getElementById("type3"); //This may not always exist 

    //other code 

    if (otherParameterFromForm == 'true') 
    { 
     if(Table1.options[2].selected) 
     { 
      alert("Invalid option for other Parameter selected."); 
     } 
     if(Table2.options[2].selected) //if only 1 row, this causes script to stop` 
     { 
      alert("Invalid option for other Parameter selected."); 
     } 
     if(Table3.options[2].selected) //if 2 or fewer rows, this causes script to stop 
     { 
      alert("Invalid option for other Parameter selected."); 
     } 
    } 

}

Also, wenn der Benutzer weniger als 3 Listenfelder hat, und ich Referenz ein, die nicht erstellt wird, scheint das Skript nur scheitern. Ich habe überprüft, ob die anderen Listenfelder vorhanden sind (dh typeof Table3! == 'undefined'), aber nichts scheint zu funktionieren. Ich habe auch versucht Warnungen für die verschiedenen Tabellen und verwandte Werte (schnell und schmutzig Debuggen) zu werfen, aber wieder, jeder Verweis auf eine Listenfeld Tabellenvariable, die nicht erstellt wurde, wird das Skript fehlschlagen, auch wenn versuchen, zu überprüfen seine Existenz.

Also stellen wir uns vor, der Benutzer hat nur 2 Tabellen. Jedes Mal wenn ich die Überprüfung für Table3 mache (wenn es existiert oder was auch immer), stirbt mein Skript.

So zum Beispiel unter der Annahme, 2 Tabellen erstellt:

var Table1=document.getElementById("type1"); //This will always exist 
    var Table2=document.getElementById("type2"); //This may not exist 
    var Table3=document.getElementById("type3"); //This may not exist 

    alert("Test1"); 
    if(systemNameTable3 === null){ 
     alert("test2"); 
    } 

Ich werde die "Test1" alert, aber nicht "Test2".

Gibt es eine Möglichkeit zu überprüfen, ob eine Tabelle in HTML vorhanden ist oder nicht, bevor Sie sie einer Variablen zuweisen? Gibt es eine Möglichkeit, eine Variable, die auf diese Weise nicht existiert, in einer if-Anweisung zu verwenden, ohne dass das Skript stirbt (oder es in irgendeiner Weise referenziert, was nicht möglich ist)? Gibt es einen besseren Weg, dies zu tun (ohne eine komplette Überarbeitung des Codes ... das könnte für einen anderen Tag sein).

Answer 1

if (!document.getElementById("option1")) { 
    alert("Option 1 does not exist"); 
if (!document.getElementById("option2")) { 
    alert("Option 2 does not exist"); 
if (!document.getElementById("option3")) { 
    alert("Option 3 does not exist"); 

Html:

<select name="type1" id="type1"> 
<option id="option1" value="option1">Option1</option> 
<option id="option2" value="option2">Option2</option> 
<option id="option3" value="option3">Option3</option> 
</select> 

Answer 2

var Table2=document.getElementById("option3"); 

if (Table2) { //meaning, if Table2 is NOT 'falsy' 
//then do the following.. 

Answer 3

@rsn nicht haben wurden antworten sollte so schnell entlassen.Der "falsche" Test in Tabelle 2 hilft zu bestätigen, dass wir damit arbeiten können.

Im folgenden Code habe ich einige Möglichkeiten zur Behebung des Problems angegeben. Methode1 Art von Spiegeln, was Sie jetzt tun. Methode 2 macht etwas ähnliches, aber in einer kompakteren Form.

var Table1=document.getElementById("type1"); //This will always exist 
 
var Table2=document.getElementById("type2"); //This may not exist 
 
var Table3=document.getElementById("type3"); //This may not always exist 
 

 
// ================================== 
 
// are any of them set to option2? 
 
// ================================== 
 
if(Table1) { 
 
    if("option2" === Table1.value) { alert("Method1 : This is not a valid choice."); } 
 
} 
 

 
if(Table2) { 
 
    if("option2" === Table2.value) { alert("Method1 : This is not a valid choice."); } 
 
} 
 

 
if(Table3) { 
 
    if("option2" === Table3.value) { alert("Method1 : This is not a valid choice."); } 
 
} 
 
// ================================== 
 

 

 
// ================================== 
 
// I might do this though for mostly the same effect 
 
// ================================== 
 
var myTables = document.querySelectorAll("select"); 
 
for (var i=0; i < myTables.length; i++) { 
 
    if(myTables[i] && "option2" === myTables[i].value) { alert("Method2 : Invalid choice found."); } 
 
} 
 
// ==================================

<select name="type1" id="type1"> 
 
    <option value="option1">Option1</option> 
 
    <option value="option2" selected="selected">Option2</option> 
 
    <option value="option3">Option3</option> 
 
</select> 
 

 
<select name="type2" id="type2"> 
 
    <option value="option1">Option1</option> 
 
</select>