something noob about html forms

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

Adam · Accepted Answer · 2012-04-26T12:55:57.687

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

}

score 0 · Answer 2 · answered Apr 26 '12 at 09:34

I assume from your question that you want to dynamically populate the second dropdown based on the selected value of the first one.

To do that you can use jQuery to get the value of the first selected value pass it to a PHP file to get a response of the options that the second drop down needs to have and populate them.

You can use .show() and .hide() also to hide or show the dropdown when is needed.

$('#first').change(function(){
    var selected= $('#first').val();
    $.getJSON('data.php',{name: selected},function(data){
        var results='';
        $.each(data, function(i, item) {
            results += '<option value="'+item.Description+'">'+item.Description+'</option>"' ;
          });
          $("select#Second").html(results);

    })
 });

If the options do not need to dynamically change and you just need to hide and show then you can use the simpsons88 answer!

something noob about html forms

2 Answers2