根据输入显示窗体

我会用div包装表单，并用类和id处理：

<form id="form-shower">
<select id="myselect">
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>
<div id="form_name1" class="forms">
<form name="form_name1" style="display:none">
<!---- THIS IS FORM 1---->
</form>
</div>
<div id="form_name2" class="forms">
<form name="form_name2" style="display:none">
<!---- THIS IS FORM 2---->
</form>
</div>
<div id="form_name3" class="forms">
<form name="form_name3" style="display:none">
<!---- THIS IS FORM 3---->
</form>
</div>

JS:

$("#myselect").on("change", function() {
    var selected = $(this).val();
    $(".forms").hide();
    $("#" + selected).show();
})

这里有一个JavaScript演示：

• 使用getElementById()引用select元素
• 为change事件选择的addEventListener
• 当用户从select的选项中选择表单时，会调用pickForm()
• pickForm()将：
  • 将所选选项的值存储在变量中。
    • var pick = this.options[this.selectedIndex].value
  • 使用该值引用特定的隐藏窗体。
    • var form = document.getElementById(pick);
  • 收集id中包含单词"formName"的所有表单。
    • var formAll = document.querySelectorAll('[id*="formName"]');
  • 对它们进行迭代并移除类CCD_ 9并将CCD_。
    • for(var i=0; i < formAll.length; i++) { formAll[i].classList.remove('show'); formAll[i].classList.add('hide'); }
  • 删除类.hide并将.show添加到所选表单
    • form.classList.remove('hide'); form.classList.add('show');

这里有一个jQuery演示：

$('#ySelect').on('change', function(event) {
   var pick = event.target.value;
   var $pick = $('#'+pick);
   $('[id*="formName"]').hide();
   $pick.show();
});

摘录

//JavaScript
var sel = document.getElementById('xSelect');
sel.addEventListener('change', pickForm, false);
function pickForm(e) {
  var pick = this.options[this.selectedIndex].value;
  var form = document.getElementById(pick);
  var formAll = document.querySelectorAll('[id*="formName"]');
  for (var i = 0; i < formAll.length; i++) {
    formAll[i].classList.remove('show');
    formAll[i].classList.add('hide');
  }
  form.classList.remove('hide');
  form.classList.add('show');
}
//jQuery
$('#ySelect').on('change', function(event) {
  var pick = event.target.value;
  var $pick = $('#' + pick);
  $('[id*="formname"]').hide();
  $pick.show();
});

.hide {
  display: none;
}
.show {
  display: block;
}
[id*="formName"] {
  color: red;
}
[id*="formname"] {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formSelect">
  <label>JavaScript</label>
  <select id="xSelect">
    <option value="" selected="selected"></option>
    <option value="formName1">Form 1</option>
    <option value="formName2">Form 2</option>
    <option value="formName3">Form 3</option>
  </select>
  <label>jQuery</label>
  <select id="ySelect">
    <option value="" selected="selected"></option>
    <option value="formname1">Form 1</option>
    <option value="formname2">Form 2</option>
    <option value="formname3">Form 3</option>
  </select>
</form>
<section id="js">
  <form name="formName1" id="formName1" class="hide">
    FORM 1
  </form>
  <form name="formName2" id="formName2" class="hide">
    FORM 2
  </form>
  <form name="formName3" id="formName3" class="hide">
    FORM 3
  </form>
</section>
<section id="jq">
  <form name="formname1" id="formname1" class="hide">
    FORM 1
  </form>
  <form name="formName2" id="formname2" class="hide">
    FORM 2
  </form>
  <form name="formname3" id="formname3" class="hide">
    FORM 3
  </form>
</section>