Kuli Kuli Survey Gizmo Store Selector

kulikuli_store_selector.js

// https://gist.github.com/jormon/d8bfa406f3a2eadbab079f2b0e59e3c7
$(document).ready(function() {
  var clearSelect = function(select) {
    var children = select.first().children()
    if(children.length == 0) { return; }
    for (i = 0; i < children.length; i++) {
      children[i].remove();
    }
    text = "Select a store..."
    var placeholder = $("<option value='' disabled selected>"+text+"</option>");
    select.append(placeholder);
    return;
  }

  var insertSelect = function(select_class, before, values) {
    var name = select_class + "-select"
    var elem = $("<select name='"+name+"' class='" + select_class +
      "'></select>");
    // elem.attr("style", "display: block;");
    var text = "Select a " + select_class;
    var placeholder = $("<option value='' disabled selected>"+text+"</option>");
    elem.append(placeholder);
    for (i = 0; i < values.length; i++) {
      var option = $("<option>" + values[i] + "</option>");
      elem.append(option);
    }
    elem.insertBefore(before);
    return elem;
  }

  var regionOrChainChanged = function() {
    selectedRegion = regionSelect.val();
    selectedChain = chainSelect.val();
    clearSelect(storeSelect);
    originalInput.val("")
    if (selectedRegion == "" || selectedChain == "") { return; }
    storeLabel.show();
    storeSelect.show();
    populateStoreSelectFor(selectedRegion, selectedChain);
  }

  var storeChanged = function() {
    originalInput.val(storeSelect.val());
  }

  var populateStoreSelectFor = function(region, chain) {
    for (i = 0; i < kulikuli_stores.length; i++) {
      var store = kulikuli_stores[i];
      if (store.region == region && store.chain == chain) {
        var value = region + " - " + chain + " - " + store.name;
        var option = $("<option value='"+value+"'>" + store.name + "</option>");
        storeSelect.append(option);
      }
    }
  }

  var originalInput = $("#sgE-4395290-3-56-element");
  window.originalInput = originalInput;
  originalInput.hide();

  $("<label for='region-select'>Region:</label>").insertBefore(originalInput);
  regionSelect = insertSelect("region", originalInput, kulikuli_regions);
  $("<br/>").insertBefore(originalInput);
  $("<label for='chain-select'>Chain:</label>").insertBefore(originalInput);
  chainSelect = insertSelect("chain", originalInput, kulikuli_chains);
  $("<br/>").insertBefore(originalInput);
  var storeLabel = $("<label>Store:</label>").insertBefore(originalInput);
  storeSelect = insertSelect("store", originalInput, []);
  storeSelect.hide();
  storeLabel.hide();

  regionSelect.on("change", regionOrChainChanged.bind(this));
  chainSelect.on("change", regionOrChainChanged.bind(this));
  storeSelect.on("change", storeChanged.bind(this));
});