Cambiar el contenido de un div basado en la selección del menú desplegable

¿Existe una manera simple, mediante JavaScript, para mostrar/ocultar contenido dinámicamente en un <div> según la selección de usuarios de un menú desplegable? Por ejemplo, si un usuario selecciona option 1, me gustaría que se muestre <div> 1 y que se oculten todos los demás <div> s.Cambiar el contenido de un div basado en la selección del menú desplegable

EDIT: Ejemplo HTML Configuración

<select> 
<option> Option 1</option> 
<option> Option 2</option> 
<option> Option 3</option> 
<select> 

<div id="content_1" style="display:hidden;">Content 1<div> 
<div id="content_2" style="display:hidden;">Content 2<div> 
<div id="content_3" style="display:hidden;">Content 3<div>

Fuente

2011-05-28 Thomas

Sí, hay. Si muestra lo que tiene hasta ahora, podría obtener ayuda. Sería más sensato aprender los rudimentos de Javascript y DOM y aprender a escribirlo usted mismo, en lugar de confiar en el código de cortar y pegar. – lonesomeday

Hmm, bueno, realmente solo estoy buscando una técnica. Si lees mi pregunta, no creo que haya pedido un código de corte/pegado, solo un método. – Thomas

El método consiste en crear un oyente en el menú desplegable para el evento 'change', y luego cambiar la propiedad de estilo' display' para cada uno de los elementos 'div' en consecuencia. – lonesomeday

here is a jsfiddle con un ejemplo de mostrar/ocultar divs a través de una selección.

HTML:

<div id="option1" class="group">asdf</div> 
<div id="option2" class="group">kljh</div> 
<div id="option3" class="group">zxcv</div> 
<div id="option4" class="group">qwerty</div> 
<select id="selectMe"> 
    <option value="option1">option1</option> 
    <option value="option2">option2</option> 
    <option value="option3">option3</option> 
    <option value="option4">option4</option> 
</select>

jQuery:

$(document).ready(function() { 
    $('.group').hide(); 
    $('#option1').show(); 
    $('#selectMe').change(function() { 
    $('.group').hide(); 
    $('#'+$(this).val()).show(); 
    }) 
});

Fuente

2011-05-28 21:47:36

El enlace de demostración no funciona. ¿Puedes actualizarlo? – neophyte

¡el jsfiddle no funciona! devuelve 404. BTW jquary requiere un compilador? –

Meh demasiado lento. Aquí está mi ejemplo de todos modos :)
http://jsfiddle.net/cqDES/

$(function() { 
    $('select').change(function() { 
     var val = $(this).val(); 
     if (val) { 
      $('div:not(#div' + val + ')').slideUp(); 
      $('#div' + val).slideDown(); 
     } else { 
      $('div').slideDown(); 
     } 
    }); 
});

Fuente

2011-05-28 21:49:50 Andy

Puede que quieras ocultar los elementos en carga en tu violín. – rybo111

@ rybo111 Sí, podría, pero si selecciona la opción vacía, se mostrarán todas nuevamente, por lo que podría ser una característica. – Andy

El OP los ocultó en carga en su pregunta, por lo que ese fue el efecto deseado. – rybo111

-1

Hay muchas formas de realizar su tarea, pero el más elegante son, en mi opinión, el uso de CSS. Éstos son los pasos básicos

Escuchar evento de selección de opciones, esperando añadir/eliminar un poco de clase a la acción de contenedores, que contiene todos los divs que le interesan (por ejemplo, el cuerpo)
Adición de estilos para ocultar todos los divs, excepto uno.
Bien hecho, señor.

Esto funciona bastante bien si hay algunos divs, ya que hay más elementos que desea alternar, se deben escribir más reglas de css. Aquí hay una solución más general, acción vinculante, base en los siguientes pasos: 1. encuentre todos los elementos usando algún selector (generalmente se ve como '.menú-contenedor .menú-elemento') 2. encuentre uno de los elementos encontrados, que es actual visible, escóndalo 3. haga visible otro elemento, el que desea que sea visible bajo nuevas circunstancias.

Javascript a un lenguaje más timtoady)

Fuente

2011-05-28 21:52:05 shabunc

con jQuery

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <style> 
.inv { 
    display: none; 
} 
    </style> 
    <body> 
     <select id="target"> 
      <option value="">Select...</option> 
      <option value="content_1">Option 1</option> 
      <option value="content_2">Option 2</option> 
      <option value="content_3">Option 3</option> 
     <select> 

     <div id="content_1" class="inv">Content 1</div> 
     <div id="content_2" class="inv">Content 2</div> 
     <div id="content_3" class="inv">Content 3</div> 

     <script> 
      document 
       .getElementById('target') 
       .addEventListener('change', function() { 
        'use strict'; 
        var vis = document.querySelector('.vis'), 
         target = document.getElementById(this.value); 
        if (vis !== null) { 
         vis.className = 'inv'; 
        } 
        if (target !== null) { 
         target.className = 'vis'; 
        } 
      }); 
     </script> 
    </body> 
</html>

Fuente

2014-07-20 09:59:48

La respuesta aceptada cero tiene un par de inconvenientes:

no se dirigen a los ID en el código JavaScript. Use clases y atributos de datos en avoid repeating your code.
Es una buena práctica ocultarse con CSS en la carga en lugar de con JavaScript — para admitir usuarios sin JavaScript y evitar un parpadeo de mostrar y ocultar al cargar.

Teniendo en cuenta lo anterior, las opciones podrían incluso tener valores diferentes, pero alternar la misma clase:

<select class="div-toggle" data-target=".my-info-1"> 
    <option value="orange" data-show=".citrus">Orange</option> 
    <option value="lemon" data-show=".citrus">Lemon</option> 
    <option value="apple" data-show=".pome">Apple</option> 
    <option value="pear" data-show=".pome">Pear</option> 
</select> 

<div class="my-info-1"> 
    <div class="citrus hide">Citrus is...</div> 
    <div class="pome hide">A pome is...</div> 
</div>

jQuery:

$(document).on('change', '.div-toggle', function() { 
    var target = $(this).data('target'); 
    var show = $("option:selected", this).data('show'); 
    $(target).children().addClass('hide'); 
    $(show).removeClass('hide'); 
}); 
$(document).ready(function(){ 
    $('.div-toggle').trigger('change'); 
});

CSS:

.hide { 
    display: none; 
}

Aquí es a JSFiddle para verlo en acción.

Fuente

2014-07-20 10:18:56 rybo111

¿Alguna razón por la cual mi uno no parece funcionar? http://jsfiddle.net/fuvxkzkd/ - Por extraño que parezca, la versión que se ejecuta en mi sitio local, parece funcionar parcialmente, pero no agrega la clase 'ocultar' a los elementos de opción si se selecciona otra, por lo que solo agrega a la lista de líneas que se muestran – Lee

@Lee Si comprueba su consola de JavaScript, verá '$ is not defined', lo que significa que jQuery no se ha cargado en su violín. En JSFiddle, agregue 'https: // code.jquery.com/jquery-1.11.3.js' a Recursos externos a la izquierda. – rybo111

Ah. Guau, me siento estúpido, pensé que JSfiddle lo incluía automáticamente. Bien, eso estará bien entonces. Logré que mi versión local funcionara bien también, por cierto, gracias. – Lee

Cambiar el contenido de un div basado en la selección del menú desplegable

Respuesta

Cuestiones relacionadas