A group of friends is facing a challenge. They want to create a dropdown sub-menu that appears directly below the selected item when clicking on a link from a menu.
So far, they have been able to use ajax to send requests and generate a sub-menu. However, they are struggling because the sub-menu always shows up in the first position:
Below is the HTML CODE for their simple menu:
<ul>
<li><a href="#" data-id="1" class="region_id">Item 1</a>
<ul id="city"></ul>
</li>
<li><a href="#" data-id="2" class="region_id">Item 2</a>
<ul id="city"></ul>
</li>
<li><a href="#" data-id="3" class="region_id">Item 3</a>
<ul id="city"></ul>
</li>
<li><a href="#" data-id="4" class="region_id">Item 4</a>
<ul id="city"></ul>
</li>
<li><a href="#" data-id="5" class="region_id">Item 5</a>
<ul id="city"></ul>
</li>
</ul>
The JavaScript code they have implemented is as follows:
$('.region_id').on('click', function(event) {
event.preventDefault();
$.get('{!! url("filter_city") !!}', {id : $(this).attr('data-id'), token: $('input[name="_token"]').val() }, function(data) {
var cities = $('#city');
cities.empty();
$.each(data, function(key, value) {
cities.append($("<li></li>").text(value));
});
});
});
This is the result they are currently getting when clicking any option:
https://i.sstatic.net/UhTit.png
The friends are looking for advice on how to achieve the desired outcome. Greetings from Chile!