Hello I want to show next div when current is selected for ex. when option 1 or 2 selected then drop down of 3 and 4 should be shown, and when 3 or 4 selected then drop down of 5 and 6 should be shown and so on...
Here's what i have done
$(document).ready(function () {
var f = $('.abc').first().css("display","block");
f.change(function() {
f.next('.abc').css("display","block");
});
});.abc{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="abc">
<select>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="abc">
<select>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="abc">
<select>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="abc">
<select>
<option>7</option>
<option>8</option>
</select>
</div>You can do it like this:
$(document).ready(function() {
var f = $('.abc').hide();
f.first().css("display", "block");
f.change(function() {
$(this).next('.abc').css("display", "block");
});
});
First you want f to be equal to all .abc and not just the first.
Second you need $(this).next('.abc') and not f.next('.abc'). Because you want to know what abc has been changed so you know the next one.
Demo
$(document).ready(function() {
var f = $('.abc').hide();
f.first().css("display", "block");
f.change(function() {
$(this).next('.abc').css("display", "block");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="abc">
<select>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="abc">
<select>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="abc">
<select>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="abc">
<select>
<option>7</option>
<option>8</option>
</select>
</div>