Question

在我的控制器上，我有一个数据数组，可以让我找到图像位置，然后将其设置为

$data['template_image']。 并在视图中 <img src="<?php echo $template_image;?>" alt="" id="template" class="img-thumbnail" />

当我保存表单时，图像会发生变化，但我想要的是当我使用下拉选项时，它会随着下拉选项而改变。

如何使用带有codeigniter的jquery或java脚本获得该效果。

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Website extends Controller {

public function __construct() {
parent::__construct();
$this->load->model('admin/website/model_website');
$this->load->model('admin/website/model_website_setting');
$this->lang->load('admin/website/website', 'english');
$this->model_website_setting->setWebsiteID($this->uri->segment(4));
}

public function index() {
$this->document->setTitle($this->lang->line('heading_title'));


if (!empty($this->input->post('config_template'))) {
 $data['config_template'] = $this->input->post('config_template');
} else {
 $data['config_template'] = $this->model_website_setting->get('config_template');
}

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

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

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

if (is_file(FCPATH . 'image/templates/' . $this->model_website_setting->get('config_template') . '.png')) {
 $data['template_image'] = base_url('image/templates/' . $this->model_website_setting->get('config_template') . '.png');
} else {
 $data['template_image'] = base_url('image/no_image.png');
}

return $this->load->view('website/website_form', $data);

}

}

查看

<form action="<?php echo $action;?>" method="post" role="form">

<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 />
<?php if (is_file(FCPATH . 'image/templates/' . $this->model_website_setting->get('config_template') . '.png')) { ?>
<img src="<?php echo base_url('image/templates/' . $this->model_website_setting->get('config_template') . '.png');?>" alt="" id="template" class="img-thumbnail" />
<?php } else { ?>
<img src="<?php echo base_url('image/no_image.png')?>" alt="" id="template" class="img-thumbnail" />
<?php } ?>
</div>
</div>

</form>

Answer 1

$(document).ready(function(){
    $("select").on('change',function(){
        $("#my_image_id").attr("src",this.value);
    });
});

http://jsfiddle.net/83xn35nk/

修改

在你的情况下，它将是：

$(document).ready(function(){ $("#input-template").on('change',function(){ $("#template").attr("src",this.value).; }); });

Answer 2

<form action="<?php echo $action;?>" method="post" role="form">

你的$ action值在哪里？您没有从controller.try发送动作值来发送它。比如$data['action']='your action path'
在表单中添加一个id，如

 <form id="myForm" action="<?php echo $action;?>" method="post" role="form">

现在提交表格更改选择框

$(document).ready(function()
{
  $(document).on("change", "#input-template", function(event)
  {
    $("#myForm").submit();
  });
});

图像在选择javascript上更改

2 个答案: