Как скрыть элементы управления и показать новый div на основе выбранного значения из раскрывающегося списка

У меня есть форма с тремя элементами управления. Te страница загружается с этими тремя элементами управления. один из элементов управления-drop box, который заполнен пятью элементами. Каждый выбор имеет свой собственный элемент управления для отображения. Я скрыл все пять div и будет показан на основе выбранного значения.

  1. Форма будет загружаться с тремя элементами управления
  2. Выберите значение из раскрывающегося списка
  3. скрыть поля и отобразить форму / элемент управления на основе выбранного значения
  4. При изменении выбранного значения необходимо скрыть Предыдущее значение
  5. это должно применяться к любому выбранному значению в раскрывающемся списке

Я написал функцию Java script, но она не скрывает загруженные элементы управления и показывает новую форму или div с элементами управления для этого выбора.

Вопрос: Как скрыть и показать div на основе выбора из раскрывающегося списка?

Я пробовал этот пример

вот мой код ниже;

сценарий 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>

3 ответа

  1. Проблема в том, что вам нужно скрыть все другие дивы, а не только один, как вы делаете в настоящее время.

    Вы можете решить эту проблему, применив класс к каждому из Display divs, добавив скрытый класс к любому элементу с этим классом, а затем сделав выбранный div видимым.

    Или вы можете вручную скрыть все divs в каждом случае в прослушивателе событий, но это было бы излишне рептитивным.

  2. Вы определенно должны добавить класс ко всем дивам, которые нужно скрыть. Это позволяет скрыть все из них сразу, а затем показать тот, который выбирается. Причина, по которой некоторые из ваших дивов не отображались, была связана с опечатками в вашем JS. Вот работающая скрипка.

    Рабочий 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");
              }
        });
    });
    
  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>