This is how we do dotCMS Custom Content Driven Multi-Selects

generic-multiselect.vtl

## This is VTL File we have saved in assets.aquent.com/vtl/custom-fields/generic-multiselect.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

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

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

<select id="${fieldVar}-multi" name="${fieldVar}-multi" onchange="update${fieldVar}MultiSelect()" multiple>
#foreach($con in $dotcontent.pull($query,$limit,$sortOrder))
  <option value="${con.get($valueField)}"#if($context.get("${fieldVar}").contains($con.get($valueField))) selected#end>${con.get($lblField)}</option>
#end
</select>

<script>
function update${fieldVar}MultiSelect() {
  var valuesList = "";
  var multiselect = $('${fieldVar}-multi');
  for(var i = 0; i < multiselect.options.length; i++) {
    if(multiselect.options[i].selected) {
      valuesList += multiselect.options[i].value + ",";
    }
  }
  $('${fieldVar}').value = valuesList;
}
</script>

The-Custom-Field-Code.vtl

## This is the code in the custom field

#set($fieldVar   = 'market')            ## This field's Velocity Var Name
#set($stName     = 'Markets')           ## The Structure Name to Pull From
#set($sortOrder  = "${stName}.title")   ## The order to sort the results in
#set($conditions = "")                  ## Sometimes it is neccessary to pass more conditions to the query
#set($limit      = 0)                   ## The Query Limit
#set($valueField = "marketId")          ## The Name of the field in the structure to get the value from
#set($lblField   = "name")              ## The name of the field in the structure to get the label from

#dotParse('//assets.aquent.com/vtl/custom-fields/generic-multiselect.vtl')

X-More-Complex-Example.vtl

## Sometimes things need to be more complex and we fork the code and do something like this ...

## Set in the custom field code if it needs to be different
#if(!$UtilMethods.isSet($industryFieldName))
  #set($industryFieldName = 'industry')
#end

## Getting the current value
#set($selectedIndustries  = $UtilMethods.arrayToArrayList($context.get("${industryFieldName}").split(',')))

<!-- Debug: $industryFieldName = $selectedIndustries -->

#set($lids = $contents.getEmptyMap())
#set($_dummy = $lids.put('1-US', '1'))
#set($_dummy = $lids.put('2-FR', '3'))
#set($_dummy = $lids.put('3-JP', '4'))
#set($_dummy = $lids.put('4-AU', '5'))
#set($_dummy = $lids.put('5-UK', '6'))
#set($_dummy = $lids.put('6-NL', '7'))
#set($shown = $contents.getEmptyList())
<select id="${industryFieldName}-multi" name="${industryFieldName}-multi" onchange="update${industryFieldName}MultiSelect()" multiple>
  #foreach($lid in $sorter.sort($lids.keySet()))
    #set($lidQuery = "+contentType:AqIndustry2016 +languageId:${lids.get($lid)}")
    #if($dotcontent.count($lidQuery) > 0)
      #set($hasLidOut = false)
      #set($lidOut = "")
      #foreach($ind in $dotcontent.pull($lidQuery, 0, "AqIndustry2016.title"))
        #if(!$shown.contains($ind.urlTitle))
          #set($sel = "")
          #if($selectedIndustries.contains($ind.urlTitle))
            #set($sel = " selected")
          #end
          #set($lidOut = "$!{lidOut}<option value=${esc.q}${ind.urlTitle}${esc.q}${sel}>${ind.title}</option>")
          #set($_dummy = $shown.add($ind.urlTitle))
          #set($hasLidOut = true)
        #end
      #end
      #if($hasLidOut)
        <option>++++++ ${lid.substring(2, $lid.length())} ++++++</option>
        $lidOut
      #end
    #end
  #end
</select>

<script>
function update${industryFieldName}MultiSelect() {
  var valuesList = "";
  var multiselect = $('${industryFieldName}-multi');
  for(var i = 0; i < multiselect.options.length; i++) {
    if(multiselect.options[i].selected) {
      valuesList += multiselect.options[i].value + ",";
    }
  }
  $('${industryFieldName}').value = valuesList;
}
</script>