Javascript zeigen versteckte div, wenn Option ausgewählt ist Fehler

Ich versuche this code für ein bisschen komplexere Auswahlliste zu verwenden, scheint aber nicht zu funktionieren.Javascript zeigen versteckte div, wenn Option ausgewählt ist Fehler

Wenn Wert = 0 ausgewählt ist, sollte ein verstecktes div angezeigt werden. Wenn Wert = 1 ausgewählt ist, sollte ein anderes verstecktes div angezeigt werden.

Ich bin neu in JS. Kannst du bitte helfen, den Fehler zu finden?

HTML:

<select name="status" id="soflow2" onchange="showDiv(this)"> 
 
<option>Select</option> 
 
<option value="0">Single</option> 
 
<option value="1">Married</option> 
 
<option value="1">Registered Legal Partnership</option> 
 
<option value="1">Remarried</option> 
 
<option value="0">Legally Separated</option> 
 
<option value="0">Divorced</option> 
 
<option value="0">Widowed</option> 
 
<option value="1">Informal Partnership</option> 
 
</select> 
 

 
<div id="stepsHIDDEN"> 
 
<button type="button" class="nextstep"><a href="04Step.html">Next</a></button> 
 
</div> 
 

 
<div id="questionHIDDEN"> 
 
<p> 
 
Is your spouse gainfully employed? 
 
</p> 
 
</div>

JS:

function showDiv(elem){ 
 
if(elem.value == 1) 
 
document.getElementById('hidden_div').style.display = "block"; 
 
} else { document.getElementById('stepsHIDDEN').style.display = "block"; 
 
}

Quelle

2016-04-18 testimo

standardmäßig ein <option>, die nicht explizit hav Wenn ein Wert versucht, seinen Text zu verwenden, lautet die Eigenschaft value "Auswählen", wenn Sie keine Auswahl haben.

Sie können das verwenden, um ein- oder ausblenden oder <div> entsprechend:

<!-- You may want to initially hide your section since it won't have a value --> 
<div id="stepsHIDDEN" style='display:none;'> 
    <button type="button" class="nextstep"> 
     <a href="04Step.html">Next</a> 
    </button> 
</div> 
<script> 
    function showDiv(elem){ 
     // If your value is `Select`, then hide your element 
     if(elem.value == 'Select'){ 
      document.getElementById('stepsHIDDEN').style.display = "none"; 
     } 
     else{ 
      document.getElementById('stepsHIDDEN').style.display = "block"; 
     } 
    } 
</script>

oder wenn Sie lieber ein Liner-Funktion:

function showDiv(elem){ 
    document.getElementById('stepsHIDDEN').style.display = (elem.value == 'Select') ? "none" : "block";  
}

vollständiges Beispiel

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <select name="status" id="soflow2" onchange="showDiv(this)"> 
 
    <option>Select</option> 
 
    <option value="0">Single</option> 
 
    <option value="1">Married</option> 
 
    <option value="1">Registered Legal Partnership</option> 
 
    <option value="1">Remarried</option> 
 
    <option value="0">Legally Separated</option> 
 
    <option value="0">Divorced</option> 
 
    <option value="0">Widowed</option> 
 
    <option value="1">Informal Partnership</option> 
 
    </select> 
 

 
    <div id="stepsHIDDEN" style='display:none;'> 
 
    <button type="button" class="nextstep"> 
 
     <a href="04Step.html">Next</a> 
 
    </button> 
 
    </div> 
 
    <script> 
 
    function showDiv(elem){ 
 
     if(elem.value == 'Select'){ 
 
     document.getElementById('stepsHIDDEN').style.display = "none"; 
 
     } 
 
     else{ 
 
     document.getElementById('stepsHIDDEN').style.display = "block"; 
 
     } 
 
    } 
 
    </script> 
 
</body> 
 
</html>

Quelle

2016-04-18 16:00:11

Vielen Dank für die Antwort! Ich habe es versucht und es funktionierte für ein div, aber ich habe 2, und abhängig vom Wert der gewählten Option (0 oder 1) muss ich 2 verschiedene divs zeigen, nicht nur eins. Wie würde der Code dann aussehen? – testimo

Es gibt ein paar Möglichkeiten, wie Sie damit umgehen können. Implementieren Sie eine 'switch' Anweisung oder verwenden Sie einfach den zweiten Inline-If-Ansatz, den ich bereits erwähnt habe. Sie können [Beispiele hier] (https://gist.github.com/Rionmonster/d5dfdcf09396afe4ef01551405bf513f) sehen. –

der 2. arbeitete. Danke vielmals! – testimo

Javascript zeigen versteckte div, wenn Option ausgewählt ist Fehler

Antwort

Verwandte Themen