下拉列表依賴形式

我認爲它是一個簡單的答案，但不確定最好的方法，我是新的形式。下拉列表依賴形式

我想要一個包含型號的下拉列表。當選擇某個型號時，它會顯示一個帶有相應命名輸入的表格。

例如

模型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

下拉列表依賴形式

回答

相關問題