Quiero una salida diferente basada en la opción seleccionada.
Lo que estoy tratando de hacer es si la opción seleccionada está más allá de la opción 2, quiero ingresar la condición. Si no es así, no introduzca la condición.
Este es mi código:
$(document).ready(function() { $('#title').html("Date 1 or 2"); $('#select-date').change(function() { if ($('#select-date') > $('#select-date').is(':nth-child(2)')) { $('#title').html("Date 3 to 6"); } }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div> <p id="title"></p> <select id="select-date"> <option>Date 1</option> <option>Date 2</option> <option>Date 3</option> <option>Date 4</option> <option>Date 5</option> <option>Date 6</option> </select> </div>Es probable que desee ver la opción seleccionada
$("#select-date option:selected")pero es mucho más simple usar el DOM selectedIndex que está basado en 0.
Cuando usa this en lugar de $(this) , obtiene el objeto DOM subyacente
Estoy usando un llamado ternary para establecer el texto del título.
$(function() { $('#select-date') .on("change", function() { $('#title').html(this.selectedIndex < 2 ? "Date 1 or 2" : "Date 3 to 6"); }) .change(); // initialise }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div> <p id="title"></p> <select id="select-date"> <option>Date 1</option> <option>Date 2</option> <option>Date 3</option> <option>Date 4</option> <option>Date 5</option> <option>Date 6</option> </select> </div>