Javascript JS在选择表单codeigniter上更改图像

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

我想这样，也在我的表格上选择他们什么主题，我选择它，然后改变图像自动之前，我点击保存

我想一个JS改变图像的主题是什么每一个选择

控制器 看法

---

如果我答对了-您只需更改“选择”而不按“提交”即可提交表单？如果您可以使用jQuery，那么您可以这样做smth：

$('#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-modify输出中显示它

<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>

---

它改变了它，但使表单提交重定向到我的仪表板。只需要在我点击提交之前进行更改，这样我就可以首先查看图像。是否有其他地方可以使用我的img位置，因为您的图像将其置于“选择表单”之上，并且在第一个选项中有us和数组错误。很难添加这些更正，而看不到实际的整个页面代码

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

<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>

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