 <p>First, you should not use <code>find('list')</code> since it returns key/value pairs, you want to use (e.g.):</p> <pre><code>$types = $this-&gt;Types-&gt;find()-&gt;select(['id','name','color'])-&gt;toArray(); </code></pre> <p>Then in your view, you want to be able to store the <code>color</code> attributes, so e.g.:</p> <pre><code>// Convert your $types array to something we can send to `select` $options = array_map(function ($e) { return [ 'value' =&gt; $e-&gt;id, 'text' =&gt; $e-&gt;name, 'templateVars' =&gt; [ 'color' =&gt; $e-&gt;color ] ]; }, $types); // Use a custom template for the `option` element to store the color as a data- attribute $this-&gt;Form-&gt;templates([ 'option' =&gt; '&lt;option value="{{value}}" data-color="{{color}}"{{attrs}}&gt;{{text}}&lt;/option&gt;' ]); // Create the select element echo $this-&gt;Form-&gt;select('type', $options, [ 'empty'=&gt;'Types', 'class' =&gt; 'form-control', 'id' =&gt; 'types' ]); </code></pre> <p>See <a href="http://book.cakephp.org/3.0/en/views/helpers/form.html#adding-additional-template-variables-to-templates" rel="nofollow">the cookbook</a> if you don' t know what are additional template variables (<code>templateVars</code> ) - You need CakePHP 3.1+ to use <code>templateVars</code>.</p> <p>You will get something like:</p> <pre><code>&lt;select name="type" class="form-control form-control" id="types"&gt; &lt;option value="" data-color=""&gt;Types&lt;/option&gt; &lt;option value="1" data-color="ff0000"&gt;Red&lt;/option&gt; &lt;option value="2" data-color="0000ff"&gt;Blue&lt;/option&gt; &lt;option value="3" data-color="00ff00"&gt;Green&lt;/option&gt; &lt;/select&gt; </code></pre> <p>For the following, I am assuming you have an element with <code>id="color-preview"</code> in which you want to set the background color, e.g.:</p> <pre><code>&lt;div id="color-preview"&gt;&lt;/div&gt; </code></pre> <p>Here is what the javascript code would look like (with jQuery):</p> <pre><code>$('#types').on('change', function () { var opt = $(this).find(':selected'); var col = ''; if (opt.data('color')) { col = '#' + opt.data('color'); } $('#color-preview').css({background: col}); }); </code></pre> <p>Without jQuery (modern browser only):</p> <pre><code>var previewDiv = document.getElementById('color-preview'); document.getElementById('types').addEventListener('change', function () { var opt = this.options[this.selectedIndex]; var col = ''; if (opt.dataset.color) { col = '#' + opt.dataset.color; } previewDiv.style.background = col; }); </code></pre>