JSFiddle - React, Tailwind, and code Playground

by frncsdrk

HTML

<table id="slctTable">
  <tr></tr>
</table>

JavaScript

var geojson = {
	features: []
};

var map,
  fields = ["id", "x", "y", "keten", "name"],
  fieldValues = [],
  autocomplete = [];

var d = [1, 2, 3, 4, 5];
//Create feature object container
var feature = {
  "type": "Feature",
  "properties": {}, //properties object container
  "geometry": d[fields.length] //parse geometry
};
// Define 1 feature that is equal to lengt of fields
for (var i = 0; i < fields.length; i++) {
  feature.properties[fields[i]] = d[i];
};

// De feature names get added, after this it will autocomplete
if ($.inArray(feature.properties.keten, autocomplete) == -1) {
  autocomplete.push(feature.properties.keten);
};

geojson.features.push(feature); // )
// };

$(document).ready(function() {

  $("#slctTable").change(function() {
    $.getJSON("dropdown_code/get_fields.php?table=" + $(this).val(), success = function(data) {
      optionsFields = "";
      for (var i = 0; i < data.length; i++) {
        optionsFields += "<option value='" + data[i] + "'>" + data[i] + "</option>";
      }
      $("#slctField").html("");
      $("#slctField").append(optionsFields);
      $("#slctField").change();
      /*Maak hier een functie aan om de data terug te geven aan het einde van de callback want GET AJAX is Asynchronous*/
      $('#slctField').trigger('slctFieldFilled');
    });
  });

  //listen on custom event...
  $('#slctField').on('slctFieldFilled', function(e) {
    $('#slctField > option').each(function() {
      this.value; // Use this.value to get the value of the option
    });

    fieldValues = [];
    $('#slctField > option').each(function() {
      fieldValues.push(this.value);
    });
    console.log(fieldValues);
  });

});