¿Cómo mostrar elementos div usando el menú desplegable en jQuery?

Posted on by Rudeus Greyrat

Para mostrar datos/contenido de un elemento específico seleccionando el menú desplegable particular en jQuery, podemos usar las siguientes formas:

  1. Usando los métodos hide() y show():
    • métodos hide() : este método se utiliza para ocultar la sintaxis o el elemento de html que desea ocultar.
      Sintaxis: 
      $(selector).hide(speed, callback);
    • métodos show() : este método se utiliza para mostrar la sintaxis o el elemento de html que desea que el usuario vea.
      Sintaxis: 
      $(selector).show(speed, callback);

    Acercarse:

    • El nombre del selector para el menú desplegable es el mismo que el elemento que se utiliza para mostrar el contenido.
    • Almacene los valores de los elementos seleccionados en variable usando el método .attr() .
    • Ahora verifique el elemento si algún elemento está seleccionado o no.
    • En caso afirmativo, utilice el método show() para mostrar el elemento del elemento seleccionado; de lo contrario, utilice el método hide() para ocultarlo.

    Ejemplo 1:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>How to display div elements
          using Dropdown Menu in jQuery?</title>
        <script src=
    "https://code.jquery.com/jquery-1.12.4.min.js">
      </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1>
            <h3> jQuery |
              Show and Hide div elements using Dropdown Menu</h3>
            <div>
                <select>
                    <option>Select</option>
                    <option value="C">C</option>
                    <option value="Cplus">C++</option>
                    <option value="Python">Python</option>
                    <option value="Java">Java</option>
                </select>
            </div>
            <div>
                <div class="C GFG" 
                     style="padding: 30px; 
                            margin-top: 30px;
                            width :60%; 
                            background:green">
                  <strong>C</strong> 
                  is a procedural programming language
              </div>
                <div class="Cplus GFG" 
                     style="padding: 30px;
                            margin-top: 30px; 
                            width :60%;
                            background:green">
                  <strong>C++</strong> 
                  is a general purpose programming language
              </div>
                <div class="Python GFG"
                     style="padding: 30px;
                            margin-top: 30px; 
                            width :60%;
                            background:green">
                  <strong>Python</strong> 
                  is a widely used general-purpose,
                  high level programming language.
              </div>
                <div class="Java GFG"
                     style="padding: 30px;
                            margin-top: 30px; 
                            width :60%;
                            background:green">
                  <strong>Java</strong> 
                  is a most popular programming 
                  language for many years.
              </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("select").on('change', function() {
                        $(this).find("option:selected").each(function() {
                            var geeks = $(this).attr("value");
                            if (geeks) {
                                $(".GFG").not("." + geeks).hide();
                                $("." + geeks).show();
                            } else {
                                $(".GFG").hide();
                            }
      
                        });
                    }).change();
                });
            </script>
        </center>
    </body>
      
    </html>

    Salida:
    Antes de seleccionar cualquier botón de opción:

    Después de seleccionar el botón de opción:

    Ejemplo 2: junto con el método de alerta

    <!DOCTYPE html>
    <html>
      
    <head>
        <title> How to display div elements
          using Dropdown Menu in jQuery?</title>
        <script src=
    "https://code.jquery.com/jquery-1.12.4.min.js">
      </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1>
            <h3> jQuery | Show
              and Hide div elements using Dropdown Menu
          </h3>
            <div>
                <select>
                    <option>Select</option>
                    <option value="C">C</option>
                    <option value="Cplus">C++</option>
                    <option value="Python">Python</option>
                    <option value="Java">Java</option>
                </select>
            </div>
            <div>
                <div class="C GFG" 
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%; 
                            background:green">
                  <strong>C</strong> 
                  is a procedural programming language
              </div>
                <div class="Cplus GFG" 
                     style="padding: 30px;
                            margin-top: 30px; 
                            width :60%; 
                            background:green">
                  <strong>C++</strong> 
                  is a general purpose programming language
              </div>
                <div class="Python GFG"
                     style="padding: 30px; 
                            margin-top: 30px;
                            width :60%; 
                            background:green">
                  <strong>Python</strong> 
                  is a widely used general-purpose,
                  high level programming language.
              </div>
                <div class="Java GFG"
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%; 
                            background:green">
                  <strong>Java</strong> 
                  is a most popular programming language for many years.
              </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("select").on('change', function() {
                        $(this).find("option:selected").each(function() {
                            var geeks = $(this).attr("value");
                            if (geeks) {
                                $(".GFG").not("." + geeks).hide();
                                $("." + geeks).show();
                                alert("Radio button " + geeks + " is selected");
                            } else {
                                $(".GFG").hide();
                                alert("Select an Element from Menu");
                            }
      
                        });
                    }).change();
                });
            </script>
        </center>
    </body>
      
    </html>

    Producción:

  2. Usando el método css():
    Método .css(): Este método en JQuery se usa para cambiar la propiedad de estilo del elemento seleccionado.

    Sintaxis:

    $(selector).css(property)

    Acercarse:

    • El nombre del selector para el menú desplegable es el mismo que el elemento que se utiliza para mostrar el contenido.
    • Encuentre el elemento seleccionado de la lista usando el método .find() .
    • Ahora verifique el elemento cuyo elemento está seleccionado.
    • Ahora cambie la propiedad de visualización del elemento seleccionado usando el método .css() .

    Ejemplo:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>How to display div 
          elements using Dropdown Menu in jQuery?
      </title>
        <script src=
    "https://code.jquery.com/jquery-1.12.4.min.js">
        </script>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1>
            <h3> jQuery | Show and
              Hide div elements using Dropdown Menu</h3>
            <div>
                <select>
                    <option>Select</option>
                    <option value="C">C</option>
                    <option value="Cplus">C++</option>
                    <option value="Python">Python</option>
                    <option value="Java">Java</option>
                </select>
            </div>
            <div>
                <div class="C GFG"
                     style="padding: 30px; 
                            margin-top: 30px;
                            width :60%;
                            background:green">
                    <strong>C</strong> 
                  is a procedural programming language
                </div>
                <div class="Cplus GFG" 
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%;
                            background:green">
                    <strong>C++</strong> 
                  is a general purpose programming language
                </div>
                <div class="Python GFG" 
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%;
                            background:green">
                    <strong>Python</strong> 
                  is a widely used general-purpose,
                  high level programming language.
                </div>
                <div class="Java GFG"
                     style="padding: 30px;
                            margin-top: 30px;
                            width :60%;
                            background:green">
                    <strong>Java</strong> 
                  is a most popular programming language for many years.
                </div>
            </div>
      
            <script type="text/javascript">
                $(document).ready(function() {
                    $("select").on('change', function() {
                        $(this).find(
                            "option:selected").each(function() {
                            $(".C").css('display', (
                              this.value == 'C') ? 'block' : 'none');
                            $(".Cplus").css('display', (
                              this.value == 'Cplus') ? 'block' : 'none');
                            $(".Python").css('display', (
                              this.value == 'Python') ? 'block' : 'none');
                            $(".Java").css('display', (
                              this.value == 'Java') ? 'block' : 'none');
                        });
                    }).change();
                });
            </script>
        </center>
    </body>
      
    </html>

    Salida:
    Antes de seleccionar cualquier botón de opción:

    Después de seleccionar el botón de opción:

Publicación traducida automáticamente

Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *