javascript - How to make text appear when you choose a certain option -
i'm sort of stuck @ moment. want make div text appear when user selects 1 option select dropdown form. how can done in javascript? found online takes selected , shows value chose.
whereas, want this:
<select> <option>one</option> <option>two</option> </select> <div id="text" style="display:hidden;">the text show if user chooses option "two"</div>
anyone know how this?
update:
here's problem. i've tried using script both in body , in header:
<script type="text/javascript"> document.getelementbyid('script-choose').onchange=function(){ for(var i=0;i<document.getelementsbyclassname('option-show').length;i++){ document.getelementsbyclassname('option-show')[i].style.display='none'; } document.getelementbyid(document.getelementbyid('script-choose').value == 'gold').style.display='block';} </script>
my select form's id 'script-choose' , value i'm using make hidden text display 'gold'. no matter when choose 'gold' value though, won't display text. here's div i'm using:
<div id="one-show" class="option-show" style="font-size:10.5px;color:red;">you 1 free theme of choice later on! :d </div>
according comments, div displayed when 'two' selected. clarity, here entire code start finish:
<select id="myselect" onchange='on_change(this)'> // note onchange event handler, passes select object on_change function via 'this' variable <option value='one'>one</option> // note added value='one' <option value='two'>two</option> // note added value='two' </select> <div id="text" style="display:none;"> // note display:none instead of display:hidden text show if user chooses option "two" </div> <script> function on_change(el){ if(el.options[el.selectedindex].value == 'two'){ document.getelementbyid('text').style.display = 'block'; // show el }else{ document.getelementbyid('text').style.display = 'none'; // hide el } } </script>
to answer question, not need replace el
select object, passed using this
while calling on_change()
in select box onchange event handler.
furthermore, not take advice of every other answer here.. importing jquery simple set event handler , manipulate dom excessive , pointless - learn javascript before learn jquery.
Comments
Post a Comment