JSFiddle - React, Tailwind, and code Playground

by newblt123

JavaScript

function createSelect(data) {
    var select = $("<select></select>");
    select.attr('id', data.id);
    
    $.each(data.data, function (index, value) {
        var option = $("<option></option>");
        option.val(value.value);
        option.html(value.text);
        if(value.default) option.attr('selected', 'selected');
        select.append(option);
    });
    
    $.each(data.dependencies, function(index, value){
        if(value.onchange){
            $("#" + value.id).on('change', value.onchange);
        }
        if(value.init){
            value.init(select);
            console.log(select.data("geolocation"));
            console.log(select.data("jobtitle"));
            console.log(select.data("ajax"));
        }
    });
   
    return select;
}

function stuffRetrieve(stuff){
    $.each(stuff, function(index, value){
        $("body").append(createSelect(value));
    });
}

var stuff = [{
	id: 'geolocation_select',
	data: [{
		value: '1',
		text: 'geolocation1',
		default: true
	}, {
		value: '2',
		text:'geolocation2',
		default: false
	}],
	dependencies: []
},
{
    id: 'jobtitle_select',
    data: [{
        value: '1',
        text: 'jobtitle1',
        default: true
    }, {
        value: '2',
        text: 'jobtitle2',
        default: false
    }],
    dependencies: []
},
{
	id: 'project_select',
	data: [{
		value: '1',
		text: 'project1',
		default: false
	}, {
		value: '2',
		text: 'project2',
		default: true
	}],
	dependencies: [{
        init: function(select){
            select.data("geolocation", "1");
            select.data("jobtitle", "1");
            select.data("ajax", function () {
                $.ajax({
                    type: 'post',
                    url: '',
                    data: {
                        geolocation: ctrl.data("geolocation"),
                        jobtitle: ctrl.data("jobtitle")
                    },
                    success: function () {
                        console.log('phew');
 ...