Question

i think its a simple answer but not sure on the best method and i am new to forms.

I want to have a drop-down list with model numbers in. When a certain model number is selected it displays a form with the appropriately named inputs.

e.g.

Model 1 – when selected – displays input field 1 and input field 2

Model 2 – when selected – displays input field 1 and input field 2 and input field 3

Model 3 – when selected – displays input field 1 and input field 4 and input field 5

would like this to happen dynamically.

help greatly appreciated weather you write the code or link me to a tutorial or example site

thank you

Answer 1

HTML

<select id="myselect">
  <option value="Model 1">Model 1</option>
  <option value="Model 2">Model 2</option>
</select>

<div id="Form1" class="forms">Form 1 Contents</div>
<div id="Form2" class="forms">Form 2 Contents</div>

jQuery

$(function() {
    $(".forms").hide();
    $("#myselect").change(function() {
        switch($(this).val()){ 
            case "Model 1":
                $(".forms").hide().parent().find("#Form1").show();
                break;
            case "Model 2":
                $(".forms").hide().parent().find("#Form2").show();
                break;
        }
    });
});

See example on jsFiddle: http://jsfiddle.net/6PtuN/