How to dynamically create a drop-down list with JavaScript and jQuery

 Project Topmedia

Ticket 100006: [Topmedia] 3.1. Search – Product Finder

page.productfinderselection.js

use 

https://www.techiedelight.com/dynamically-create-drop-down-list-javascript/#:~:text=To%20add%20a%20drop%2Ddown,appendChild()%20method%20or%20jQuery's%20.

$(MakeListDropdown).on('change', function () {
 
        $("#productFacets").empty();
        debugger;
        var option = MakeListDropdown.find('option:selected');
        var typeId = option.attr('value');
        var getUrl = Sana.Urls.Home() + 'ProductFilter/GetProductFinderTypes'; //MakeListDropdown.attr('data-src');
        $.ajax({
            url: getUrl,
            type: "GET",
            dataType: "JSON",
            data: { typeId: typeId },
            success: function (data) {
 
                if (data) {
 
                    const values = data;
                   
                    for (const val of values) {
                        //create new dropdown list
                        var select = document.createElement("select");
                        select.name = val.Name;
                        select.id = val.Name;
 
                       var labelName = val.Name;                                              
 
                        for (const facet of val.Items) {
                            // create options for the drop down list
                            var option = document.createElement("option");                        
                            option.value = facet.Title;
                            option.text = facet.Title;
                            select.appendChild(option);
                        }
 
                        var label = document.createElement("label");
                        label.innerHTML = labelName;
                        label.htmlFor = labelName;
 
                        $("#productFacets").append(label).append(select);
                                                                      
                    }