I have a drop down selection, once it select it will show the div where the value and class share the same name and hide all else.
How can I have it so before you select it'll show all and only hide after you select a option ?
EDIT I have updated the code snippet to run, have built in markup however on my local its php.
Revised question
how can I adjust my jQuery to show all, when none are selected and the selection is on default.
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>You can make a couple of changes:
use $(this).val() (this=select) to get the value= from the select option, no need to find option:selected and loop as .val() does this for you.
check for "all" then don't apply the filter
as noted in the comments, "one"/"two" were around the wrong way (no impact on functionality, just makes it look like it's wrong)
Updated snippet:
$(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>