下拉动态django ajax

Question

I am using django for dynamic dropdown. There are two dropdown when the first dropdown was click and there is a subcategory for it, the second dropdown will show options. I want to disable the second dropdown if there is no subcategory for it. How can I do that?

$("#id_general-collision_type").change(function () {
const url = $("#form_incidentgeneral").attr("data-acc-url");  // get the url of the `load_cities` view
const collisionId = $(this).val();  // get the selected country ID from the HTML input

$.ajax({                       // initialize an AJAX request
    url: url,                    // set the url of the request (= /persons/ajax/load-cities/ )
    data: {
        'collision_type_id': collisionId       // add the country id to the GET parameters
    },
    success: function (data) {  
        //console.log(data) // `data` is the return of the `load_cities` view function
        $("#id_general-collision_subcategory").html(data);  // replace the contents of the city input with the data that came from the server

        let html_data = '<option value="">---------</option>';
        data.forEach(function (collision_subcategory) {
            html_data += `<option value="${collision_subcategory.id}">${collision_subcategory.sub_category}</option>`
        });
        console.log(html_data);
        $("#id_general-collision_subcategory").html(html_data);

    }
});

});

Answer 1

success: function (data) {
    let select_element = $('select'); #Sub_category select
    $(select_element).html(''); #Make Empty Select
    for(let i=;i<data.length;i++){
         let x = data[i];
         let option_element = `<option value='${x['id']}'`>${x['sub_category']}</option>`;
         $(select_element).append(option_element);
   }
}