Проверьте, выбран ли параметр Form cakephp 3

Question

У меня есть форму для выбора типов. Каждый тип имеет соответствующий цвет. В моей TypesController я функция, связанная с представлением:

$types = $this->Types->find('list')->select(['id','name','color'])->toArray(); 
$this->set(compact(['types'])); 

И на мой взгляд, я могу перечислить все типы в избранных:

echo $this->Form->select('type_id', $types,['empty'=>'Types','class' => 'form-control','id'=>'types']); 

Я хотел бы показать цвет типа в когда пользователь выбирает тип. Только при выборе опции. Является ли это возможным? Я пробовал с JS, но это не сработало. Цвет шестнадцатеричный.

Благодарим за помощь!

Answer 1

Во-первых, вы не должны использовать find('list'), поскольку он возвращает пары ключ/значение, вы хотите использовать (например):

$types = $this->Types->find()->select(['id','name','color'])->toArray(); 

Затем на ваш взгляд, вы хотите, чтобы иметь возможность хранить color атрибуты, так, например:

// Convert your $types array to something we can send to `select` 
$options = array_map(function ($e) { 
    return [ 
     'value' => $e->id, 
     'text' => $e->name, 
     'templateVars' => [ 
      'color' => $e->color 
     ] 
    ]; 
}, $types); 
// Use a custom template for the `option` element to store the color as a data- attribute 
$this->Form->templates([ 
    'option' => '<option value="{{value}}" data-color="{{color}}"{{attrs}}>{{text}}</option>' 
]); 
// Create the select element 
echo $this->Form->select('type', $options, [ 
    'empty'=>'Types', 'class' => 'form-control', 'id' => 'types' 
]); 

См the cookbook, если вы не»т знать, какие дополнительные переменные шаблона (templateVars) - Вам нужно CakePHP 3.1+ использовать templateVars.

вы получите что-то вроде:

<select name="type" class="form-control form-control" id="types"> 
    <option value="" data-color="">Types</option> 
    <option value="1" data-color="ff0000">Red</option> 
    <option value="2" data-color="0000ff">Blue</option> 
    <option value="3" data-color="00ff00">Green</option> 
</select> 

Для следующего, я предполагаю, что у вас есть элемент с id="color-preview", в котором вы хотите установить цвет фона, например:

<div id="color-preview"></div> 

Здесь как выглядит код javascript (с jQuery):

$('#types').on('change', function() { 
    var opt = $(this).find(':selected'); 
    var col = ''; 
    if (opt.data('color')) { 
     col = '#' + opt.data('color'); 
    } 
    $('#color-preview').css({background: col}); 
}); 

Wit hout jQuery (только для современного браузера):