要在选择javascript时更改的图像

image to change on select javascript

本文关键字：图像 选择 javascript      更新时间：2023-09-26

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

CCD_ 1正在查看<img src="<?php echo $template_image;?>" alt="" id="template" class="img-thumbnail" />

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

我如何使用jquery或使用codeigniter的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>

$(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).;
    });
});

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

你的$action价值在哪里？您没有从控制器发送操作值。请尝试发送它。如$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();
  });
});
相关文章：