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'
]);

如果您不知道哪些是其他模板变量（templateVars），请参阅the cookbook - 您需要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});
});

没有jQuery（仅限现代浏览器）：

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;
});

检查是否选择了选项Form cakephp 3

1 个答案: