使用select更改图像和描述
Change Image and description using select
我想根据字段中的选定值更改图像和描述。我已经完成了,但问题是我只能使用.val()进行描述和图像处理。
我现在正处于测试阶段,稍后在完成jQuery之后我将从数据库中获取值这是我的Javascript:
<script>
var base_url = "<?php echo base_url();?>";
$(document).ready(function() {
$("#field_6").change(function() {
$('#description').html($(this).val());
$('#image').attr("src", base_url + "img/" + $(this).val());
}).change();
});
</script>
这是我的HTML代码:
<select class="form-control" id="field_6" name="field_6">
<option value="1.jpg">Online Portal for FGC</option>
<option value="2.png">Restaurant Management for Wit Cafe</option>
<option value="3.jpg">Hotel Reservation for TWIECO</option>
</select>
<img src="<?php echo base_url()?>img/1.jpg" id="image" class="img-responsive" style="height:300px;width:100%;" name="myImage" /><br>
<label class="form_field">Title Description: <span id="description"></span>?</label>
现在的输出如下:
我得到了图片
然后是ex.(1.jpg)
我的问题是,如果图像名称和描述都相同,那就不好了。例如,图像名称将是FGC.jpg
的在线门户,并且描述也将是这样的。
这里,厌倦了在评论中说话。您的更改在选择框上,因此您无法在没有找到选项的情况下获得这些选项的数据属性,需要添加"查找所选选项"部分。
<script>
var base_url = "test.com/";
$(document).ready(function() {
$("#field_6").change(function() {
$('#description').html($(this).find('option:selected').attr('data-description'));
$('#image').attr("src", base_url + "img/" + $(this).find('option:selected').attr('data-img'));
});
});
</script>
<select class="form-control" id="field_6" name="field_6">
<option data-description="my description" data-img="test.com/image.jpg" value="1.jpg">Online Portal for FGC</option>
<option data-description="my description2" data-img="test.com/image2.jpg" value="2.png">Restaurant Management for Wit Cafe</option>
<option data-description="my description3" data-img="test.com/image3.jpg" value="3.jpg">Hotel Reservation for TWIECO</option>
</select>
<img src="test.com/img/1.jpg" id="image" class="img-responsive" style="height:300px;width:100%;" name="myImage" /><br>
<label class="form_field">Title Description: <span id="description"></span>?</label>
如果我没记错:
$('#description').html($(this).find( "option:selected" ).text());
开始:
$("#field_6").change(function() {
$('#description').html($(':selected', this).text());
$('#image').attr("src", base_url + "img/" + $(this).val());
}).change();
<script>
var base_url = "<?php echo base_url();?>";
$(document).ready(function() {
$("#field_6").change(function() {
$('#description').html($(this).find('option:selected').attr("data-description"));
$('#image').attr("src", base_url + "img/" + $(this).val());
}).change();
});
</script>
相关文章:
- 使用select更改图像和描述
- jQuery透明图像描述鼠标悬停时的幻灯片动画
- 在html中连接图像和描述时出现问题
- 如何正确存储图像的描述信息
- 有没有任何方法可以使用joomla为图像添加描述!模态挤压盒
- 将动态OG标题,描述和图像传递到javascript中的Facebook共享对话框
- 制作一个简单的JavaScript滑块,我将如何为我的图像添加描述
- 如何使用 Javascript 和正则表达式将 RSS 提要的描述标签中的多个图像解析到我的描述页面
- 我们如何为“;像facebook一样没有开放图;但我需要张贴标题,描述,图像
- 用于提要对话框的Javascript FB.ui省略了图像&描述
- 如何在metro.js中为图像集合添加描述(客户端和服务器端)
- 添加并保存图像的文本描述
- 如何在twitter中使用API或JAVASCRIPT发布tweet(描述和图像)
- 我想用Lightbox显示图像和它的文字描述
- 下拉图像描述框
- 无法显示与我的图像对应的正确描述
- 如何在jQuery PhotoStack图库中的每个图像上添加描述
- 为灯箱图像添加描述
- 将图标图像添加到具有描述的弹出框中
- 缩略图库,单击时在同一页面上加载图像描述和全尺寸