Javascript show hidden div при выборе опции выбрана ошибка

Я пытаюсь использовать this code для немного более сложного списка выбора, но, похоже, не работает.Javascript show hidden div при выборе опции выбрана ошибка

Если выбрано значение = 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>

или, если вы предпочитаете, используя функцию в один лайнер:

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

Спасибо за ответ! Я пробовал, и он работал для одного div, но у меня 2, и в зависимости от значения выбранного параметра (0 или 1) мне нужно показать 2 разных div, а не один. В таком случае, как бы выглядел код? – testimo

Есть несколько способов справиться с этим. Реализация инструкции 'switch' или просто использование второго подхода inline-if, о котором я упоминал ранее. Вы можете увидеть [примеры здесь] (https://gist.github.com/Rionmonster/d5dfdcf09396afe4ef01551405bf513f). –

второй работал. большое спасибо! – testimo

Javascript show hidden div при выборе опции выбрана ошибка

ответ

Смежные вопросы