下拉列表依赖形式

我认为它是一个简单的答案，但不确定最好的方法，我是新的形式。下拉列表依赖形式

我想要一个包含型号的下拉列表。当选择某个型号时，它会显示一个带有相应命名输入的表格。

例如

模型1 - 当选择 - 显示输入场1和输入场2

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

模型3 - 选择时 - 显示输入字段1和输入字段4以及输入字段5

想要动态地发生这种情况。

帮助非常感谢天气，你写的代码或链接我的教程或示例站点

谢谢

来源

2010-07-19 thom

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/

来源

2010-07-19 15:13:12 jessegavin

非常感谢，很好地完成了 – thom 2010-07-19 15:15:55

<select onchange="JavaScript: showAppropriateForm(this.value);"> 
    <option value="Model 1">Model 1</option> 
    <option value="Model 2">Model 2</option> 
</select>

然后

function showAppropriateForm(v) 
{ 
    document.getElementById("Form1").style.visibility = "hidden"; 
    document.getElementById("Form2").style.visibility = "hidden"; 

    if(v == "Model 1") 
    { 
    document.getElementById("Form1").style.visibility = "visible"; 
    } 
    else if(v == "Model 2") 
    { 
    document.getElementById("Form2").style.visibility = "visible"; 
    } 
}

来源

2010-07-19 14:49:58 Sparafusile

谢谢你，伟大的工程只需要改变对jQuery和新增CSS完美。太简单了，介意太炸了 – thom 2010-07-19 15:12:59

$('.button').click(function(event){ 
    switch (event.target) { 
    case $('#option1'): 
     //load input field 1 and 2 
    break; 
    case $('#option2'): 
     //load input field 1, 2, and 3 
    break; 
});

不超肯定的使用开关来查找ID的语法，但您可以像我们一样简单地使用if/else if/else if statemen吨。

来源

2010-07-19 15:02:35 Squirkle

下拉列表依赖形式

回答

相关问题