Wie kann onchange() verwendet werden, um eine andere Auswahlliste anzuzeigen?

Question

Benötigen Sie Hilfe hier. Es schien ein wenig stecken zu bleiben. Um es kurz und bündig zu halten, habe ich eine Auswahlliste, die mehrere Optionen enthält. Nun, mein Endziel ist, wenn ich eine bestimmte Option wähle, möchte ich eine andere Auswahlliste namens Module anzeigen und in dieser Auswahlliste auch mehrere Optionen zur Auswahl haben. Die Optionen, auf die ich in der Liste "ProductDet_Product" abziele, sind DocAve 6 und DocAve 5, wie unten dargestellt.

function loadmodule($i) { 
 
    if ($i = "DocAve 6") { 
 
    var x = document.createElement("SELECT"); 
 
    x.setAttribute("id", "loadDA6module"); 
 
    document.body.appendChild(x); 
 

 
    var z = document.createElement("option"); 
 
    z.setAttribute("value", "Administrator") 
 
    var t = document.createTextNode("Administrator"); 
 
    z.appendChild(t); 
 
    document.getElementById("loadDA6module").appendChild)(z); 
 
    } 
 
}

<td style="text-align: center; vertical-align: middle; width: 534px;"> 
 
    <p><small>Product 
 
     (Project): 
 

 
     <select id="ProductDet_Product" 
 
      onchange="loadmodule(document.getElementById(this).options[document.getElementById(this).selectedIndex].value);"> 
 

 
      <option>APIA</option> 
 
      <option>ARIS (Risk Intelligence System)</option> 
 
      <option>Citizens Services</option> 
 
      <option>Compliance Guardian</option> 
 
      <option>Compliance Guardian Online</option> 
 
      <option>Discovery Tool</option> 
 
      <option value="DocAve 6">DocAve 6</option> 
 
      <option value="DocAve 5">DocAve 5</option> 
 
      <option>File Share Navigator</option> 
 
      <option>File Share Navigator Online</option> 
 
      <option>Governance Automation</option> 
 
      <option>Governance Automation Online</option> 
 
      <option>Meetings</option> 
 
      <option>Meetings Online</option> 
 
      <option>Office Connect</option> 
 
      <option>Perimeter</option> 
 
      <option>Perimeter Online</option> 
 
      <option>PDF Aggregator</option> 
 
      <option>Salesforce Backup</option> 
 
      <option>Secure Publisher</option> 
 
      <option>Watermark</option> 
 
     </select> 
 
    </small> 
 
    </p> 
 
</td>

Wenn ich entweder 6 DocAve 5 oder DocAve wählen, würde ich eine weitere Auswahlliste unterhalb dieser Liste angezeigt werden möchten, die Optionen, wie ich oben beschrieben enthalten würde.

Wenn ich DocAve 6 auswähle, wird die zusätzliche Auswahlliste nicht angezeigt. Ich würde gerne etwas Hilfe hier, wenn es Ihnen nichts ausmacht! Vielen Dank!

Answer 1

Man könnte es auf diese Weise tun:

• Erstellen Sie eine weitere Auswahlliste in Ihren HTML, und stellen Sie es CSS Eigenschaft display auf none

<select id="hiddenSelect">

• In Ihrem onchange() Rückruf Für den sichtbaren select, überprüfen Sie dann, ob der ausgewählte Wert == "DocAve 6" und wenn ja, legen Sie die Displ ay-Eigenschaft der anderen Liste block

    <select id="ProductDet_Product" onchange="showHiddenSelect()"> 

    function showHiddenSelect() { 
    var result = document.getElementById('ProductDet_Product').value; 
    if (result=="DocAve 5") { 
    document.getElementById("hiddenSelect").style.display = "block"; 
    } 
    } 

Answer 2

Sie brauchen nicht auf die gewählte Option wie das zu bekommen. passieren diese einfach als Argument onchange und den Wert erhalten:

<select id="ProductDet_Product" onchange="loadmodule(this);"> 

Dann im Lademodul Prüfung .value des Parameters:

function loadmodule(activities) { 
    console.log(activities.value); 
    if(activities.value == "test") 
    { 
     addOtherSelect(); 
    }  
} 

Sie können ein funktionierendes Beispiel here finden.