使用select更改图像和描述 - Change Image and description using select

Change Image and description using select

本文关键字：描述图像 select 使用 | 更新日期: 2023-09-27

我想根据字段中的选定值更改图像和描述。我已经完成了，但问题是我只能使用.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>