Hi,

 

 

I already developed have the form which is working fine, and I have one dropdown menu, but what I want to do next is when one option is selected from the dropdown menu, another dropdown menu will appear below which is connected to the option selected from the first dropdown.

 

For example, if the user selects 'search engine' another dropdown menu will appear below with options to choose which search engine.

 

I've read that using JS 'onselect' might do the trick.

 

Anyone have any tutorials or examples I can look at?

 

Thanks.

You can add the additional dropdown menus to the form but hide them with "display: none". Then using jQuery you can show the relevant dropdown menu based on what the user selects from the first dropdown menu.

 

 

<select id="some-menu">
  <option value="search engine">Search engine</option>
  <option value="something else">Something else</option>
</select>

<select id="search-engine-menu" style="display:none">
  <option value="google">Google</option>
  <option value="yahoo">Yahoo</option>
  <option value="bing">Bing</option>
</select>

<select id="something-else-menu" style="display:none">
  <option value="first item">First item</option>
  <option value="second item">Second item</option>
</select>

Then add the JavaScript:

 

 

$('#some-menu').on('change',function(e) {
   if($(this).val() == 'search engine') $('#search-engine-menu').show();   
  else $('#search-engine-menu').hide();
   if($(this).val() == 'something else') $('#something-else-menu').show();
  else $('#something-else-menu').hide();
});
 

 

 

 

For this to work you'll need to load the jquery library in your page (http://jquery.com/).

Edited February 14, 201412 yr by djitsz

I've tried that and it doesn't work.

Are you looking for something like this? http://jsfiddle.net/3UWk2/1/