Javascript show hidden div при выборе опции select

Хорошо. Я искал ответы на это некоторое время, но все, с чем я сталкиваюсь (даже при поиске javascript), появляется с помощью jQuery! никто больше не использует простой javascript?!?

Итак, что я хочу, у меня есть раскрывающийся список (выберите с несколькими опциями). Когда выбран какой-то параметр, я хочу, чтобы скрытый div отображался.

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>

Затем я пытаюсь использовать этот код javascript:

function showDiv(){
   document.getElementById('hidden_div').style.display = "block";
}

Я предполагаю, что моя проблема связана с триггером onClick в моих параметрах, но я не уверен, что еще использовать? Или я мог бы полностью отключиться от этого (обратите внимание, чтобы я получил хорошую javascript-книгу!)

Ответы

Ответ 1

попробуйте следующее:

<select id="test" name="form_select" onchange="showDiv(this)">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>

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

Ответ 2

Попробуйте обработать событие изменения select и использовать this.value, чтобы определить, является ли оно "да" или нет.

jsFiddle

JS

document.getElementById('test').addEventListener('change', function () {
    var style = this.value == 1 ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
});

HTML

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>

<div id="hidden_div" style="display: none;">Hello hidden content</div>

Ответ 3

Я думаю, что это уместно:

<select id="test" name="form_select" onchange="showDiv(this)">
   <option value="0">No</option>
   <option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>

<script type="text/javascript">
function showDiv(select){
   if(select.value==1){
    document.getElementById('hidden_div').style.display = "block";
   } else{
    document.getElementById('hidden_div').style.display = "none";
   }
} 
</script>

Попробуй, это отлично сработает. Благодаря

Ответ 4

Вы должны подключиться к событию изменения элемента <select>, а не по отдельным параметрам.

var select = document.getElementById('test'),
onChange = function(event) {
    var shown = this.options[this.selectedIndex].value == 1;

    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};

// attach event handler
if (window.addEventListener) {
    select.addEventListener('change', onChange, false);
} else {
    // of course, IE < 9 needs special treatment
    select.attachEvent('onchange', function() {
        onChange.apply(select, arguments);
    });
}

Демо

Ответ 5

Проверьте этот код. Это потрясающий код для скрытия div с помощью элемента select.

HTML

<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
    <option value="1">YES</option>
    <option value="2">NO</option>
</select>

<div id="div1" style="display:block;">
    <input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
    <input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
    <input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
    <input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
    <datalist id="cars">
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
        <option>Value 4</option>
    </datalist>
</div>

JS

<script>
    function showDiv(prefix,chooser) 
    {
            for(var i=0;i<chooser.options.length;i++) 
            {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
            }

            var selectedOption = (chooser.options[chooser.selectedIndex].value);

            if(selectedOption == "1")
            {
                displayDiv(prefix,"1");
            }
            if(selectedOption == "2")
            {
                displayDiv(prefix,"2");
            }
    }

    function displayDiv(prefix,suffix) 
    {
            var div = document.getElementById(prefix+suffix);
            div.style.display = 'block';
    }
</script>

Ответ 6

<select id="test" name="form_select" onchange="showDiv()">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
    function showDiv(){
        getSelectValue = document.getElementById("test").value;
        if(getSelectValue == "1"){
            document.getElementById("hidden_div").style.display="block";
        }else{
            document.getElementById("hidden_div").style.display="none";
        }
    }
</script>

Ответ 7

Будучи более общим, передавая значения из вызывающего элемента (который легче поддерживать).

  • Укажите условие запуска в текстовом поле (отображение: нет)
  • Передайте требуемое значение параметра, чтобы показать/скрыть ("Другое")
  • Передайте цель и поле, чтобы показать/скрыть ("TitleOther")

function showHideEle(selectSrc, targetEleId, triggerValue) {	
	if(selectSrc.value==triggerValue) {
		document.getElementById(targetEleId).style.display = "inline-block";
	} else {
		document.getElementById(targetEleId).style.display = "none";
	}
} 
<select id="Title"
   onchange="showHideEle(this, 'TitleOther', 'Other')">
      <option value="">-- Choose</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
      <option value="Miss">Miss</option>
      <option value="Other">Other --&gt;</option>						
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title" 
    style="display:none;"/>

Ответ 8

взгляните на мое решение

Я хочу сделать visaCard-note div видимым, только если выбрано cardType - visa

и вот html

<select name="cardType">
    <option value="1">visa</option>
    <option value="2">mastercard</option>
</select>

здесь находится js

var visa="1";//visa is selected by default 
$("select[name=cardType]").change(function () {
    document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})