How to call Web Service when selected option HTML? - html

Question

I have two select option HTML: Category, subCategory, and subCategory must be dependence of Category ( A item as Category contains many subCategory).
My code to show Category:
<select id="categoryID">
#foreach($category as $item)
<option id="{{$item->id}}">{{$item->name}}</option>;
#endforeach
</select>
subCategory:
<select id="sub_category">
#foreach($sub_category as $item)
<option>{{$item->name}}</option>;
#endforeach
</select>
I want to when anyone selected a item in Category, it will call Web service like '/change_category', and return new variable $sub_category dependence ID of Category you selected.
Don't think about function return new variable $sub_category, I just want to ask: How to call Web service when selected option? Thanks.

Answer 1

<select id="categoryID" onchange="changeCategory(this)">
#foreach($category as $item)
<option id="{{$item->id}}">{{$item->name}}</option>;
#endforeach
</select>
<script type="text/javascript">
function changeCategory(id){
var category = id[id.selectedIndex].id;
$.ajax({
type: "POST",
url: url,
data: {
id: category
},
success: function (data) {
//push data here
}
});
}
</script>