Володя

[[pdoResources? &tpl=`POPULARTOVAR_2` &parents=`[[*parent]]` &includeContent=`1` &includeTVs=`1` &processTVs=`1` &limit=`1000`]]

&parents=`[[+id]]`/code>

<div class="select">
    [[+rows]]
 </div>			
 <script>
    function select(element) {
    if($(element).hasClass('active')){
        $(element).removeClass('active');
        $("select[name='options[[[+name]]]']").find('option').removeAttr('selected')
    } else {   
        var value = $(element).data("value");
        $(element).siblings().removeClass('active');
        $(element).addClass('active');
        $("select[name='options[[[+name]]]']").find('option').removeAttr('selected')
        $("select[name='options[[[+name]]]']").find("option[value="+ value +"]").attr("selected","selected")
     }
 }
</script>

[[!msOptions?
&tplRow=`tpl.msOptions.row.my`
&tplOuter=`tpl.msOptions.outer.my`
&name=`size`
]]
<span style="display:none">[[!msOptions?name=`size`]]</span>

<div class="select">
    [[+rows]]
</div>			
<script>
  function select(element) {
  var value = element.getAttribute("data-value");
  var nodes = element.parentNode.childNodes;
  for (var i = 0; i < nodes.length; i++) {
    if (nodes[i] instanceof HTMLParagraphElement) {
       if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
      else nodes[i].className = "";
    }
  }
  $(document.getElementsByName("options[size]")).find("option[value="+ value +"]").attr("selected","selected")
}
</script>

<p data-value="[[+value]]" onclick="select(this)" class="">[[+value]]</p>