Hola, soy nuevo en jQuery y estoy tratando de resolver esto:
Al seleccionar un valor del menú desplegable (
<select>), debe cambiar el contenido de la etiqueta div (en rojo) con el valor seleccionado. ¡Utilice jQuery para resolver esta prueba y no agregue ninguna identificación/clase al código HTML anterior!
Ya escribí un script pero no funciona, ¿pueden ayudarme por favor?
var content = $( "div:gt(5)" ); $( "select" ).on( "click", function( event ) { content.html('6 products'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="toolbar-wrapper"> <div> <div> <label>Product Count</label> <div class="select-group"> <select> <option value="4 products" selected="selected">4 products</option> <option value="6 products">6 products</option> <option value="8 products">8 products</option> </select> </div> </div> <div>4 products</div> </div> </div>Use this.value en el controlador de eventos para obtener el valor que se seleccionó en el menú desplegable.
Cuando selecciona algo del menú desplegable, se activa el evento de change , no click .
div:gt(5) no es el selector correcto para el div donde se debe mostrar el resultado. La numeración comienza desde 0 , por lo que es DIV número 4 . Puede usar .eq(4) para seleccionar eso.
var content = $("div").eq(4); $("select").on("change", function(event) { content.html(this.value); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="toolbar-wrapper"> <div> <div> <label>Product Count</label> <div class="select-group"> <select> <option value="4 products" selected="selected">4 products</option> <option value="6 products">6 products</option> <option value="8 products">8 products</option> </select> </div> </div> <div>4 products</div> </div> </div>Puede apuntar con > & selectores de posición .
$( "select" ).on( "change", function( event ) { $('.toolbar-wrapper > div > div:nth-child(2)').html(event.target.value); });violín !