如何隐藏控件并根据从下拉列表中选择的值显示新的 div

Question

我有一个带有三个控件的表单。页面加载了这三个控件。其中一个控件是下拉框，其中填充了五个项目。每个选择都有自己的控件来显示。我已经隐藏了所有五个 div 并将根据所选值显示。

表单将加载三个控件
Select 下拉列表中的值
隐藏字段并根据所选值显示form/control
当您更改所选值时，它必须隐藏您之前的选择
这必须应用于下拉列表中的任何选定值

我已经编写了 java 脚本函数，但它不会隐藏加载的控件并显示新表单或 div 带有该选择的控件。

问题：如何根据下拉菜单中的选择隐藏和显示 div？

我试过了Example

下面是我的代码；

Java 脚本

<script type="text/javascript">
        $(document).ready(function () {
            $('#ddlControls').on('change', function () {
                if (this.value == 'Users') {
                    $("#divUsers").show();
                    alert("Users");
                }

                else if (this.value == 'Orders') {
                    $("#divUsers").hide();
                    $("#divOrders").show();
                    alert("orders here");
                }
                else if (this.value == 'Contractors') {
                    $("#divOrders").hide();
                    $("#divContractors").show();
                    alert("Contractors here");
                }
                else if (this.value == 'Permanets') {
                    $("#divContractors").hide();
                    $("#divPermanets").show();
                    alert("Permanets here");
                }
                else if (this.value == 'Reports') {
                    $("#Permanets").hide();
                    $("#divReports").show();
                    alert("Reports here");
                }
                else {
                    $("#divReports").hide();
                }
            });
        });
    </script>

查看页面

<section>
<div class="row">
    <fieldset class="fieldsetStyle">
        <form role="form">
            <div class="box-body">
                <div class="col-md-5" id="divContainer">

                    <div class="form-group">
                        <label for="ddlControls">Report Category :</label>
                        <select class="form-control" id="ddlControls">
                            <option value="-1">--Select--</option>
                            <option id="Users" value="Users">All Users</option>
                            <option id="Orders" value="Orders">All Orders</option>
                            <option id="Contractors" value="Contractors">All Contractors</option>
                            <option id="Permanets" value="Permanets">All Permanets</option>
                            <option id="Reports" value="Reports">All Reports</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="txt1">Report Number</label>
                        <input type="text" class="form-control" id="txt1">
                    </div>

                    <div class="form-group">
                        <label for="txt2">Order Number:</label>
                        <input type="text" class="form-control" id="txt2">
                    </div>

                    <!--Here are all my hidded div that i want to show based on the selection of report catergory-->
                    <div class="hidden" id="divUsers">
                        <h2>I want to show this div for Users</h2>
                        <!--I will have more controls here-->
                    </div>

                    <div class="hidden" id="divOrders">
                        <h2>I want to show this for Orders</h2>
                        <!--I will have more controls here-->
                    </div>

                    <div class="hidden" id="divContractors">
                        <h2>I want to show this div for Contractors</h2>
                        <!--I will have more controls here-->
                    </div>

                    <div class="hidden" id="divPermanet">
                        <h2>I want to show this div for Permanet</h2>
                        <!--I will have more controls here-->
                    </div>

                    <div class="hidden" id="divReport">
                        <h2>I want to show this div for Report</h2>
                        <!--I will have more controls here-->
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    </div>

Answer 1

问题是您需要隐藏所有其他 div，而不是像您目前正在做的那样只隐藏一个。

您可以通过将 class 应用于每个显示 div 来解决此问题，将隐藏的 class 添加到具有该 class 的任何元素，然后使所选 div 可见。

或者您可以在事件侦听器中手动隐藏每种情况下的所有 div，但这会造成不必要的重复。

Answer 2

您绝对应该为所有需要隐藏的 div 添加一个 class。这使您可以一次隐藏所有这些，然后显示被选中的那个。你的一些 div 没有显示的原因是你的 JS 中的拼写错误。 Here 是有效的 fiddle.

工作JavaScript：

$(function () {
    $('#ddlControls').on('change', function () {
         $('.select-div').hide();
         if (this.value == 'Users') {
             $("#divUsers").show();
             alert("Users");
          }
          else if (this.value == 'Orders') {
              $("#divOrders").show();
              alert("orders here");
          }
          else if (this.value == 'Contractors') {
              $("#divContractors").show();
              alert("Contractors here");
          }
          else if (this.value == 'Permanets') {
              $("#divPermanet").show();
              alert("Permanets here");
          }
          else if (this.value == 'Reports') {
              $("#divReport").show();
              alert("Reports here");
          }
    });
});

Answer 3

试试这个工作示例，

$(document).ready(function () {
    function hideAll(){
        $("#divUsers, #divOrders, #divContractors, #divPermanet, #divReport").hide();
      }
  
  hideAll();
  
            $('#ddlControls').on('change', function () {             
                    hideAll();
              
                if (this.value == 'Users') {
                    $("#divUsers").show();
                    alert("Users");
                }

                else if (this.value == 'Orders') {
                    $("#divOrders").show();
                    alert("orders here");
                }
                else if (this.value == 'Contractors') {
                    $("#divContractors").show();
                    alert("Contractors here");
                }
                else if (this.value == 'Permanets') {
                    $("#divPermanet").show();
                    alert("Permanets here");
                }
                else if (this.value == 'Reports') {
                    $("#divReport").show();
                    alert("Reports here");
                }
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
    <fieldset class="fieldsetStyle">
        <form role="form">
            <div class="box-body">
                <div class="col-md-5" id="divContainer">

                    <div class="form-group">
                        <label for="ddlControls">Report Category :</label>
                        <select class="form-control" id="ddlControls">
                            <option value="-1">--Select--</option>
                            <option id="Users" value="Users">All Users</option>
                            <option id="Orders" value="Orders">All Orders</option>
                            <option id="Contractors" value="Contractors">All Contractors</option>
                            <option id="Permanets" value="Permanets">All Permanets</option>
                            <option id="Reports" value="Reports">All Reports</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="txt1">Report Number</label>
                        <input type="text" class="form-control" id="txt1">
                    </div>

                    <div class="form-group">
                        <label for="txt2">Order Number:</label>
                        <input type="text" class="form-control" id="txt2">
                    </div>

                    <!--Here are all my hidded div that i want to show based on the selection of report catergory-->
                    <div id="divUsers">
                        <h2>I want to show this div for Users</h2>
                        <!--I will have more controls here-->
                    </div>

                    <div id="divOrders">
                        <h2>I want to show this for Orders</h2>
                        <!--I will have more controls here-->
                    </div>

                    <div id="divContractors">
                        <h2>I want to show this div for Contractors</h2>
                        <!--I will have more controls here-->
                    </div>

                    <div id="divPermanet">
                        <h2>I want to show this div for Permanet</h2>
                        <!--I will have more controls here-->
                    </div>

                    <div id="divReport">
                        <h2>I want to show this div for Report</h2>
                        <!--I will have more controls here-->
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    </div>

如何隐藏控件并根据从下拉列表中选择的值显示新的 div

How to hide controls and show new div based on the selected value from the dropdown

javascript

selectedvalue