javascript show ukryty div, gdy wybrana jest opcja wyboru

Question

OK Szukałem odpowiedzi na to od jakiegoś czasu, ale wszystko, co napotykam (nawet podczas wyszukiwania javascript) zawiera jQuery! czy nikt już nie używa zwykłego javascript?!?

Tak, czego chcę, mam listę rozwijaną (wybierz z wieloma opcjami). Po wybraniu pewnej opcji chcę wyświetlić ukryty element 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> 

Potem próbuję go z tego kodu javascript:

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

Zgaduję, mój problem jest ze spustem onClick w moich możliwości, ale jestem pewien, na co jeszcze w użyciu? Czy mogę być całkowicie wyłączone z tej jednej (! Uwaga do siebie dostać dobrą książkę javascript)

Answer 1

spróbuj tego:

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

Answer 2

Spróbuj obsługi zdarzenia zmiany w select i korzystania this.value aby ustalić, czy jest to " Tak czy nie.

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> 

Answer 3

należy zahaczyć przypadku zmiany elementu <select> zamiast na poszczególnych opcji.

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

Demo

Answer 4

myślę, że to jest właściwe:

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

Spróbuj tego, byłoby doskonale działa. Dzięki

Answer 5

odbioru spojrzenie na moim roztwór

chcę tylko, jeśli wybrany cardType aby visaCard-note div widoczny jest visa

i tutaj html

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

tutaj jest 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'; 
}) 

Answer 6

Sprawdź ten kod. To świetny kod do ukrycia div za pomocą wybranego elementu.

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>