I have a drop down which has some set of values. Once I select the value from the dropdown list and I can see that filter is happening. If I want to filter the another value from the dropdwon then I have to do refresh without refresh the filtering is not happening. Overall If I select the value from the dropdown the filter is happening if I want to see the filter for next value I have to do refresh without refresh the filter is not happening. Here is my HTMl code
<div class="col-md-4">
<select class="form-control" id="statusFilter">
<option value="">statuses</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div><script>
$("#statusFilter").on('change',function(){
var dropdownvalue = document.getElementById("statusFilter")
var selectStatus = dropdownvalue.options[dropdownvalue.selectedIndex].value
$.ajax({
type: 'POST',
url: '/status/filter',
data:{
'selectedstatus':selectStatus
},
success:function(result){
console.log(result)
if (result=='error'){
alert("There are no status value")
document.location.href="/status";
}
else{
document.write(result);
}}
})
})
</script>
I am not showing the entire backend
if len(status_list) > 0:
return render_template("status_list.html",result=status_list)
else:
result = 'error'
return result
is there any way we can filter the selected values without refresh in dropdown?
My backend is returning the list if it has some values or it returns error