Javascript表示選択オプションが選択されているときにエラーが表示される

少し複雑な選択リストにthis codeを使用しようとしていますが、動作していないようです。Javascript表示選択オプションが選択されているときにエラーが表示される

値= 0を選択すると、非表示のdivが表示されます。値= 1を選択すると、別の隠しdivが表示されます。

私はJSを初めて利用しています。あなたはエラーを見つけるために助けてくださいできますか？

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"; 
 
}

出典

2016-04-18 testimo

、明示的に肝炎はありません<option> e値がテキストを使用しようとするため、選択肢がない場合はvalueプロパティが「選択」になります。

あなたがそれに応じて表示または非表示にしたり、 <div>するためにそれを使用することができます

：

<!-- 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>

またはあなたは1つのライナーの機能を使用して希望の場合：

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

完全な例

を

<!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>

出典

2016-04-18 16:00:11

答えてくれてありがとう！私は試して、それは1つのdivのために働いたが、私は2を持って、選択されたオプションの値（0または1）に応じて、私は2つの異なるdivを表示する必要があります。その場合、コードはどのように見えますか？ – testimo

これを処理できる方法はいくつかあります。 'switch'ステートメントを実装するか、または私が以前に言及したアプローチの場合は2番目のインライン - を使用するだけです。 [これらの例はこちら]（https://gist.github.com/Rionmonster/d5dfdcf09396afe4ef01551405bf513f）を見ることができます。 –

は2番目に働いた。どうもありがとう！ – testimo

Javascript表示選択オプションが選択されているときにエラーが表示される

答えて

関連する問題