html - Drop down menu variable divs show on page load -


just need little on haven't been able find answer to. have drop down menu in html supposed display div image associated when drop down selection made. problem currently, load every div when page opens , hide divs when selection made. nothing shown until actual selection made if makes sense. here have far (simplified problem's sake):

<select onchange="toggle_form_element(this)" name="parts" id="parts">   <option value="-">please choose image</option>   <option value="0">img 1</option>   <option value="1">img 2</option>   <option value="2">img 3</option> </select> <span id="dropdown">   <div id="img1">image 1.jpg</div>   <div id="img2">image 2.jpg</div>   <div id="img3">image 3.jpg</div> </span>  <script type="text/javascript">   function toggle_form_element(select) {     var divselect = select.value;     var elements = dropdown.getelementsbytagname("div");       (var = 0; < elements.length; i++) {         if (i == divselect) {           elements[i].style.display = "block";         } else {           elements[i].style.display = "none";         }       }   } </script> 

any appreciated. thank you!

add styles

<style> #dropdown .image {     display: none; } </style> 

then add class elements:

<div id="img1" class="image">image 1.jpg</div> <div id="img2" class="image">image 2.jpg</div> <div id="img3" class="image">image 3.jpg</div> 

so, @ beginning images hidden css.

after making choice in select, js make 1 of them shown.


Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -