根据所选选项显示/隐藏不同的表单

Question

我想了解如何根据一个表单的选择显示/隐藏不同的表单。

在下面的示例代码中，所有三个表单都自动设置为display:none。如果从“shower”表单中选择其相应的值，则只显示其中一个“hidden”表单。因此，如果从“shower”表单中选择选项“表单1”，则显示下面的表单1；如果从“shower”表单中选择选项“表单2”，则显示表单2；以此类推。

最好带有淡入/淡出动画或其他轻量级动画。

这是一个样本...

<form id="form-shower">
<select>
<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_1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

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

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

感谢您对此的任何帮助。

- gdinari

Answer 1

你可以使用jQuery来帮助你实现这个功能：

<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>
<script>
$("#myselect").on("change", function() {
    $("#" + $(this).val()).show().siblings().hide();
})
</script>

我给你的选择器添加了一个id，并更改了你三个表单的id名称 :)

希望能有所帮助 :)

- Simon

---

我对这段代码有一个问题，第一次选择某个选项时它什么也不做，但当我选择另一个选项时，它才显示出来。 - Richard Mišenčík

Answer 2

对于未来的读者，这个设置将动态地显示/隐藏那些表单，不需要使用外部库：

function changeOptions(selectEl) {
  let selectedValue = selectEl.options[selectEl.selectedIndex].value;
  let subForms = document.getElementsByClassName('className')
  for (let i = 0; i < subForms.length; i += 1) {
    if (selectedValue === subForms[i].name) {
      subForms[i].setAttribute('style', 'display:block')
    } else {
      subForms[i].setAttribute('style', 'display:none') 
    }
  }
}

然后是HTML代码：

<select onchange="changeOptions(this)">
  <option value="" selected="selected"></option>
  <option value="form_1">Form 1</option>
  <option value="form_2">Form 2</option>
  <option value="form_3">Form 3</option>
</select>

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

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

<form class="className" name="form_3" id="form_3" style="display:none">
  <!---- THIS IS FORM 3---->
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

- Nathan Calvank

Answer 3

只需将此添加到HTML的末尾

    <script type="text/javascript">
    $('select').change(function(e){
            $this = $(e.target);
            var selected_form = $this.text().replace(' ','_name');
            $('form').hide(2000, 'easeOutExpo');
            $(selected_form).show(2000, 'easeOutExpo');
        });
    </script>

- Taha Rehman Siddiqui

Answer 4

<select>
    <option value="" selected="selected"></option>
    <option value="form_1">Form 1</option>
    <option value="form_2">Form 2</option>
    <option value="form_3">Form 3</option>
</select>

<form name="form_1" id="form_1" style="display:none">
<input type="text" value="1">
</form>

<form name="form_2" id="form_2" style="display:none">
<input type="text" value="2">
</form>

<form name="form_3" id="form_3" style="display:none">
<input type="text" value="3">
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JS：

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

示例位于http://jsfiddle.net/dfYAs/

- Roger Medeiros

Answer 5

如果您不想使用jQuery，您可以将以下代码添加到HTML的顶部：

<script>
function changeForm(form) {
  for (var i=0; i<form.length; i++){
    var form_op = form.options[i].value;
    if (form_op == form.value) {
      document.getElementsByName(form_op)[0].style.display = "block";
    }
    else {
      document.getElementsByName(form_op)[0].style.display = "none";
    }
   }
  }
</script>

然后在您的主表单中添加onChange="changeForm(this)"。 // onChange不区分大小写。

- RocketDonkey

---

嗨RocketDonkey，这个解决方案可行，但是当我选择不同的选项时，表单并没有消失，而是随着我的选择添加到页面上... - gdinari

哈，我猜那会很有用吧？看起来你已经得到了答案，但为了防止你需要一个不依赖于jQuery的响应，我会调整我的回答。 - RocketDonkey

Answer 6

制作这个

1. 创建一个可以帮助你完成这项工作的Javascript函数，类似于这样

    function FFF(){
        var opc = document.getElementById("form-shower").value;
        switch(opc)
        {
            'form_name1':
                document.getElementById('form_1').style.display = "block"; // or inline or none whatever
                break;

        }
    }

创建事件

<select id='id_selec' onChange='javascript:FFF();'>

- Carlos Alberto Blanco Vivas

Answer 7

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.red {
  background: #ff0000;
}

.green {
  background: #228B22;
}

.blue {
  background: #0000FF;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery Show Hide Elements Using Select Box</title>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
  <div>
    <select>
      <option>Choose Color</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  </div>
  <div id="check" class="red box">You have selected <strong>red option</strong> so i am here</div>
  <div id="check" class="green box">You have selected <strong>green option</strong> so i am here</div>
  <div id="check" class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>

</html>

- Umair Hassan Pansota

---

这里仅仅是一名批评家的意见：你应该至少包含一些解释上面代码的文本。 - Reality

Answer 8

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.red {
  background: #ff0000;
}

.green {
  background: #228B22;
}

.blue {
  background: #0000ff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery Show Hide Elements Using Select Box</title>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
  <div>
    <select>
      <option>Choose Color</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  </div>
  <div id="check" class="red box">You have selected <strong>red option</strong> so i am here</div>
  <div id="check" class=" box">You have selected <strong>green option</strong> so i am here</div>
  <div id="check" class="box">You have selected <strong>blue option</strong> so i am here</div>
</body>

</html>

- Javed Khan