dotCMS Single Select Custom Field using Dojo Filtering Select or jQuery

generic-relation-select.vtl

#if(!$UtilMethods.isSet($fieldVar))
  #set($fieldVar = 'market')
#end

#if(!$UtilMethods.isSet($stName))
  #set($stName = 'Markets')
#end

#if(!$UtilMethods.isSet($sortOrder))
  #set($sortOrder = "${stName}.title")
#end

#if(!$UtilMethods.isSet($conditions))
  #set($conditions = "")
#end

#if(!$UtilMethods.isSet($limit))
  #set($limit = 0)
#end

#if(!$UtilMethods.isSet($valueField))
  #set($valueField = "marketId")
#end

#if(!$UtilMethods.isSet($lblField))
  #set($lblField = "name")
#end

#if(!$UtilMethods.isSet($useToUpper))
  #set($useToUpper = false)
#end

<!-- $fieldVar - $stName - $sortOrder - $limit - $valueField - $lblField -->

#set($query = "+structureName:${stName} $!{conditions}")

<select dojoType="dijit.form.FilteringSelect" autocomplete="true" id="${fieldVar}-selector" name="${fieldVar}-selctor" onchange="set${fieldVar}Value()">
  <option value=""></option>
#foreach($con in $dotcontent.pull($query,$limit,$sortOrder))
  <option value="${con.get($valueField)}"#if($context.get("${fieldVar}") == $con.get($valueField)) selected#end>${con.get($lblField)}</option>
#end
</select>

<script>
  function set${fieldVar}Value() {    
    var y = dijit.byId("${fieldVar}-selector").getValue();
    #if($useToUpper) y = y.toUpperCase(); #end
    dojo.byId("${fieldVar}").value = y;
  }
  #if($useToUpper)
    dojo.addOnLoad(function() {
      dojo.byId("${fieldVar}").value = dojo.byId("${fieldVar}").value.toUpperCase();
    });
  #end
</script>

industry-select.vtl

#if(!$UtilMethods.isSet($industryFieldVar))
  #set($industryFieldVar = 'industry')
#end
#set($industryVal   = $context.get($industryFieldVar))
#set($industrySel   = $dotcontent.pull("+structureName:AquentIndustry +languageId:1 +deleted:false +live:true -AquentIndustry.industryId:ind_type_008", 0, "AquentIndustry.description"))##
<select id="${industryFieldVar}Drop" name="${industryFieldVar}Drop" data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="placeHolder: 'Select an Industry', value: '$!{industryVal}', required: false">
  <option value="">None</option>
  #foreach( $industry in $industrySel )##
  	<option value="${industry.industryId}">${industry.description}</option>
  #end
</select>

<script>
require(["dojo/dom", "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/dom-attr", "dojo/domReady!"], function industryHandler(dom, Memory, FilteringSelect, domAttr){
  function updateIndustryValue() {
    setTimeout(function industryUpdateTimer() {
      console.log('Industry changed to: ' + dijit.byId("${industryFieldVar}Drop").getValue());
      domAttr.set(dojo.byId("${industryFieldVar}"), "value", dijit.byId("${industryFieldVar}Drop").getValue());
    }, 50);
  }
  // Initialize the dijit filtering select watch handler
  dojo.addOnLoad(function checkIndustry() {
    setTimeout(function industryLoadTimer() {
      dijit.byId("${industryFieldVar}Drop").watch('displayedValue', updateIndustryValue);
    }, 50);
  });
});
</script>

japan-job-category-select.vtl

## JP Job Category Select
#if(!$UtilMethods.isSet($customFieldName))
  <p><strong>You must set ${esc.d}customFieldName to the name of this custom field.</p>
#elseif($UtilMethods.isSet($customFieldName) && $customFieldName != "")
  <select>
    <option value="">Select</option>
    #foreach($cat in $dotcontent.pull("+contentType:JapanJobCategories +languageId:4",0,"JapanJobCategories.order, JapanJobCategories.title, modDate desc"))
      <option value="${cat.urlTitle}">${cat.urlTitle} - ${cat.title}</option>
    #end
  </select>
  ## Load jQuery if it hasn't already been loaded in this page (ie. by another custom field)
  <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">\x3C/script>')</script>
  <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(jQuery) {
      /* When page is loaded, copy the hidden field value to the dropdown */
      jQuery("${esc.h}${customFieldName}_field select").val(jQuery("${esc.h}${customFieldName}").val());

      /* When new option is selected, copy dropdown value to the hidden field */
      jQuery("${esc.h}${customFieldName}_field select").on('change', function() {
        jQuery("${esc.h}${customFieldName}").val(jQuery(this).val());
      });
    });
  </script>
  ## Reset $customFieldName variable
  #set($customFieldName = "")
#end