使用选择更改图像和描述

Question

I want to change my image and description based on the selected value in my field. I have done it but the problem is that I can only use the .val() for description and image.

I'm in the test stage right now, later after I've done the jQuery I will get the values from the database Here is my 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>

Here is my HTML code:

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

The output right now is like this:
I got the image
and then ex.(1.jpg)

My problem is that it will not be good if both image name and description will be the same for example the image name will be The Online portal for FGC.jpg
and the description will be like that too.

Answer 1

如果我没记错：

$('#description').html($(this).find( "option:selected" ).text());

Answer 2

Here you go:

$("#field_6").change(function() {
    $('#description').html($(':selected', this).text());
    $('#image').attr("src", base_url + "img/" + $(this).val());
}).change();

Answer 3

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

Answer 4

Here, was tired of talking in comments. your change is on the select box, so you can't get the data attributes of the options without finding them, needed to add that 'find option selected' section.

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