Question

Possible Duplicate:
display dropdown values based on previous dropdown

I know html pretty well and about forms a little bit, but would like to know, for example:

when clicking on a certain drop down list item, a certain second drop down list appears based on the previous field choice. how would you go about incorporating this, is there a specific website I can go to?

an example of code would be appreciated. I am assuming that you could use javascript for this?
do you retrieve specific values or just use different drop down lists for specific choices

Thanks

Answer 1

of the top of my head.

You would handle your javascript on the page, before you submit your form.

step 1. reference jquery in your header
step 2. on load, hide the second select, put this script beneath you reference jquery

<script type="text/javascript">
$(function () {
   $("#secondselect").hide()

   $("#firstselect").change(function () {
            if($(this).val() != 0){
               $("#secondselect").show()
            }
            else
            {
                $("#secondselect").hide()
            }

        });
});
</script>


<select id="firstselect" name="firstselect" >
    <option value="0">first</option>
    <option value="1">second</option>
    <option value="2">third</option>
    <option value="3"></option>
</select>

<select id="secondselect" name="secondselect">
    <option value="0">first</option>
    <option value="1">second</option>
    <option value="2">third</option>
    <option value="3"></option>
</select>

Of the top of my head… but i’d do it something like that.

Good luck.

Oh… just a quick update.

You could use a switch instead of an if like so, might be a bit tidier…

FROM

if($(this).val() != 0){
               $("#secondselect").show()
            }
            else
            {
                $("#secondselect").hide()
            }

TO

switch($(this).val())
{
    case '1':
       $("#secondselect").show();
    break;
    case '1':
       //do something else... show a third dropdown instead
       //for instance...
       // $("#thirdselect").show();
       alert('got to case 1');
       //or if you use firebug or chrome, right click and inspect an element then click on Console and this log report should show
       console.log('got here, showing the log');
    break;
    default:
       $("#secondselect").hide();

}