根據所選選項顯示/隱藏不同的 forms

Question

我想知道如何根據一種形式的選擇顯示/隱藏不同的 forms。

在下面的示例代碼中，所有三個 forms 都自動設置為顯示：無。 如果從“淋浴”表單中選擇相應的值，我只想顯示“隱藏的”forms 之一。 因此，如果從“淋浴”表格中選擇選項“表格 1”，則顯示下面的表格 1； 如果從“淋浴”表格中選擇選項“表格 2”，則顯示表格 2； 等等。

最好使用淡入/淡出 animation 或另一盞燈 animation。

這是一個示例...

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

感謝您對此的任何幫助。

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 名稱:)

希望能幫助到你 ：）

Answer 2

只需將此添加到 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>

Answer 3

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

Answer 4

如果您不想使用 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 不區分大小寫。

Answer 5

做這個

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;

        }
    }

2. 創建事件

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

Answer 6

對於未來的讀者，此設置將在沒有外部庫的情況下動態顯示/隱藏這些表單：

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

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

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