Tengo una selección desplegable, una vez que seleccione, mostrará el div donde el valor y la clase comparten el mismo nombre y ocultan todo lo demás.
¿Cómo puedo tenerlo para que antes de seleccionarlo muestre todo y solo se oculte después de seleccionar una opción?
EDITAR He actualizado el fragmento de código para que se ejecute, he incorporado el marcado, sin embargo, en mi local es php.
Pregunta revisada
¿Cómo puedo ajustar mi jQuery para mostrar todo, cuando no se selecciona ninguno y la selección está predeterminada?
var $j = jQuery.noConflict(); $j(document).ready(function () { $j("select").change(function () { $j(this).find("option:selected").each(function () { var optionValue = $j(this).attr("value"); if (optionValue) { $j(".career_div").not("." + optionValue).hide(); $j("." + optionValue).show(); } else { $j(".career_div").hide(); } }); }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option value="all">Default</option> <option value="one">Intelligence (2)</option> <option value="two">Engineering (2)</option> <option value="three">Marketing (0)</option> </select> <section class="py-3 section-grey"> <div class="container"> <div class="row"> <div class="col-12 one career_div"> <strong>Intelligence</strong> </div> <div class="col-12 one career_div"> <strong>Intelligence</strong> </div> <div class="col-12 two career_div"> <strong>Engineering</strong> </div> <div class="col-12 line-grey two career_div"> <strong>Engineering</strong> </div> </div> </div> </section>Puedes hacer un par de cambios:
use $(this).val() (this= select ) para obtener el value= de la opción de selección, no es necesario buscar la option:selected y hacer un bucle ya que .val() lo hace por usted.
verifique "todos" y luego no aplique el filtro
como se indica en los comentarios, "uno"/"dos" estaban en la dirección incorrecta (sin impacto en la funcionalidad, solo hace que parezca que está mal)
Fragmento actualizado:
$(document).ready(function($) { $("select").change(function() { var opt = $(this).val(); if (opt === "all") { $(".career_div").show(); } else { $(".career_div").hide(); $("." + opt).show(); } }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option value="all">Default</option> <option value="two">Engineering (2)</option> <option value="one">Intelligence (2)</option> <option value="three">Marketing (0)</option> </select> <section class="py-3 section-grey"> <div class="container"> <div class="row"> <div class="col-12 one career_div"> <strong>Intelligence</strong> </div> <div class="col-12 one career_div"> <strong>Intelligence</strong> </div> <div class="col-12 two career_div"> <strong>Engineering</strong> </div> <div class="col-12 line-grey two career_div"> <strong>Engineering</strong> </div> </div> </div> </section>