Форма, зависимая от выпадающего списка

Question

я думаю, что это простой ответ, но не уверен в лучшем методе, и я новичок в формах.

Я хочу иметь раскрывающийся список с номерами моделей. При выборе определенного номера модели отображается форма с соответствующими именами входов.

например.

Модель 1 - при выборе - отображает поле ввода 1 и поле ввода 2

Модель 2 - при выборе - отображает поле ввода 1, поле ввода 2 и поле ввода 3

Модель 3 - при выборе - отображает поле ввода 1, поле ввода 4 и поле ввода 5

хотел бы, чтобы это происходило динамически.

очень помогите, если вы пишете код или связываете меня с учебным или примерным сайтом

спасибо

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

См. Пример для jsFiddle: http://jsfiddle.net/6PtuN/

Answer 2

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

Answer 3

$('.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;
});

Не уверен насчет синтаксиса для нахождения идентификатора с помощью переключателя, но вы также можете легко использовать оператор if / else if / else if.