下拉列表相关表格 [英] Drop-down list dependent form

问题描述

我认为它是一个简单的答案，但不知道的最好的方法，我是新来的形式。

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.

例如。

模式1 - 当选择 - 显示输入字段1和输入字段2

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

模型2 - 当选择 - 显示输入字段1和输入字段2和输入字段3

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

3型 - 当选择 - 显示输入字段1和输入字段4和输入字段5

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

想这个动态的情况发生。

would like this to happen dynamically.

帮助非常AP preciated天气你写的code或链接我的教程或示例网站

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

谢谢

推荐答案

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

请参阅上的jsfiddle例如： http://jsfiddle.net/6PtuN/

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

这篇关于下拉列表相关表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！