i have three dropdowns and 1 depends on 2 and 2 depends on 3. This is how it works. I have an issue with the 3rd one, when users changes something on 2 then 3 appends new options along with the old options. How to just replace the old ones with new ones ?
my code:
<script>
$("#id_name").change(function () {
var url = $("#create_application_form").attr("data-cities-url");
var nameId = $(this).val();
var temp_intakes = null
$.ajax({
url: url,
data: {
'name': nameId
},
success: function (data) {
temp_intakes = data.data;
$.each(data.data, function(index, name){
$('select[id=id_course]').append(
$('<option></option>').val(name.id).html(name.name)
);
});
}
});
$("#id_course").change(function () {
var selected = $(this).val()
var data = temp_intakes.filter(v => v.id === parseInt(selected ));
$.each(data, function(index, name){
$.each(name.intakes, function(index, test){
$('select[id=id_intakes]').append(
$('<option></option>').attr("value",test).text(test) // problem on here
)
})
});
})
});
</script>
And my data for the above look like this
{id: 2, name: 'John', intakes: Array(3)} // the third option using this "intakes" array as options.
Please help.