根据输入显示表单？

Question

根据从下拉菜单中选择的输入，很难显示某种形式。这是我目前的代码似乎不起作用。

HTML

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

<form name="form_name1" id="form_name1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_name2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_name3" style="display:none">
<!---- THIS IS FORM 3---->
</form>

JS：

$("#myselect").on("change", function() {
    $("#" + $(this).val()).show().siblings().hide();
})

Answer 1

我会使用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();
})

Answer 2

这是一个JavaScript演示：

• 使用getElementById()
引用select元素
• addEventListener选择change活动
• 当用户从select的选项中选择一个表单时，会调用pickForm()。
• pickForm()将：
  • 将所选选项的值存储在变量中。
    • var pick = this.options[this.selectedIndex].value
  • 使用该值来引用特定的隐藏表单。
    • var form = document.getElementById(pick);
  • 收集所有带有“formName”字样的id的表单。
    • var formAll = document.querySelectorAll('[id*="formName"]');
  • 遍历它们并移除课程.show并为每个课程添加.hide。
    • 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>