Each time I click on a different value, the console.log keeps giving me the same value. view image description
I have checked the HTML code and found that even though each value attribute is different, it still returns the first value of the attribute.
view image description
There are two options for AJAX. Here's what I've tried:
<script type="text/javascript>
$(function(){
$('.categoryList').click(function(){
var cat_id = $(this).attr('value');
var url = "http://localhost:8000/api/getSubcategory/"+cat_id;
$.ajax({
type: "GET",
url: url,
dataType: "JSON",
success: function(res)
{
var html = "";
$.each(res, function (key, value) {
html += "<option value="+key+">"+value+" </option>";
});
$('#subcategory').html($(html).addClass('subcategoryList'));
}
});
});
});
$(document).ready(function() {
$('#subcategory').click(function() {
var subcat_id = $( this ).find( '.subcategoryList' ).attr('value');
console.log(subcat_id);
var url = "/api/getSubcategorytwo/"+subcat_id;
$.ajax({
type: "GET",
url: url,
dataType: "JSON",
success: function(res)
{
var html = "";
$.each(res, function (key, value) {
html += "<option value="+key+">"+value+"</option>";
});
$("#subcategorytwo").html(html);
}
});
});
});
</script> <div class="col-md-4">
@foreach($categories as $category)
<option class="categoryList" value="{{$category->id}}">{{$category->category}}</option>
@endforeach
</div>
<div class="col-md-4">
<a name="subcategory" id="subcategory">
</a>
</div>
<div class="col-md-4">
<a name="subcategorytwo" id="subcategorytwo">
<option value=""></option>
</a>
</div>
enter code here