Question

目前，当我从我的设置中选择主题并提交表单时，它会获得主题，然后更改图像。

我希望它也能在我的表单上选择它们我选择它的主题然后在我点击保存之前自动更改图像。

我希望 JS 将图片更改为在主题中选择的内容。

控制器

public function index() {
       if (empty($config_template)) {
            $data['config_template'] = $this->configs->get('config_template');
        }

        $data['templates'] = array();

        $directories = glob(APPPATH . 'modules/catalog/views/theme/*', GLOB_ONLYDIR);

        foreach ($directories as $directory) {
            $data['templates'][] = basename($directory);
        }

        $data['image'] = DIR_IMAGE . 'templates/' . $this->configs->get('config_template') . '.png';

        $this->load->library('form_validation');

        $this->form_validation->set_rules('config_meta_title', 'Meta Title');
        $this->form_validation->set_rules('config_template', 'Template');
        $this->form_validation->set_rules('config_maintenance', 'Maintenance');

    if ($this->form_validation->run() == FALSE) {

        return $this->load->view('setting/settings', $data);

    } else {

        $config_meta_title = $this->model_setting->edit_meta_title($this->input->post('config_meta_title'));

        $config_template = $this->model_setting->edit_template($this->input->post('config_template'));


        redirect('admin/dashboard');

    }

}

查看

<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-setting" class="form-horizontal">

<div class="form-group">
<label class="col-sm-2 control-label" for="input-template"><?php echo $entry_template; ?></label>
<div class="col-sm-10">
<select name="config_template" id="input-template" class="form-control">
<?php foreach ($templates as $template) { ?>
<?php if ($template == $config_template) { ?>
<option value="<?php echo $template; ?>" selected="selected"><?php echo $template; ?></option>
<?php } else { ?>
<option value="<?php echo $template; ?>"><?php echo $template; ?></option>
<?php } ?>
<?php } ?>
</select>
<br />

<!-- Currently gets image from controller -->

<img src="<?php echo $image;?>" alt="" id="template" class="img-thumbnail" />

</div>


</div>
</form>

Answer 1

如果我说得对你 - 你需要通过更改选择提交表单，而不是按提交？那么你可以这样做（如果你可以使用jQuery）：

$('#input-template').change(function(event) {
    $('#form-setting').submit();
});

更新后，您需要为PHP代码中的模板收集所有图像

  foreach ($directories as $directory) {
            $template_details = array('name' => basename($directory),
                                      'image' => DIR_IMAGE . 'templates/' . $this->configs->get('config_template') . '.png');
            //here we create array with address and images of a template
            array_push($data['templates'], $template_details);
        }

然后以HTML格式显示 - 修改输出

<select name="config_template" id="input-template" class="form-control">
<?php foreach ($templates as $template) { ?>
<?php if ($template['name'] == $config_template) { ?>
<option value="<?php echo $template['name']; ?>" selected="selected" data-img="<?php echo $template['image']; ?>"><?php echo $template; ?></option>
<?php } else { ?>
<option value="<?php echo $template['name']; ?>" data-img="<?php echo $template['image']; ?>"><?php echo $template['name']; ?></option>
<?php } ?>
<?php } ?>
</select>

然后添加以下jQuery代码（JS）：

$('#input-template').change(function(event) {
        $('#template').attr('src', $(this).find(":selected").data('img'));
});

JS改变选择表格codeigniter上的图像

1 个答案: