下拉列表（选择框）获取选择名称

Question

I have this code on Fiddle Code

I have the picture portion of my code working, where it will change picture every time you select a value.

What I want to display is the actual Name " Image 1 " of the value.. so Image 1 etc.

I went through stackoverflow and found some examples, and I tried to implement them but i can't get it to work.

So in short, when you select an a value... it will show picture and in the empty div it will show the name

$(document).ready(function() {

   $("#image").change(function() {
     $("#imagePreview").empty();
        $("#imagePreview").append("<img src=\"" + $("#image").val()  + "\" />");
   }).change();
 });

$('#image option:selected').text(); {

   $( "div" ).text( str );
}

<select name="image" id="image" class="inputbox" size="1">
   <option value="imageall.jpg" selected> - All - </option>
   <option value="image1.jpg">image1.jpg</option>
   <option value="image2.jpg">image2.jpg</option>
   <option value="image3.jpg">image3.jpg</option>
</select>

<div id="imagePreview">
   displays image here
</div>

<div></div>

EDIT: Something like this : EXAMPLE

Answer 1

Try,

$(document).ready(function () {
    $("#image").change(function () {
        $("#imagePreview").empty();
        $("#imagePreview").append("<img src=\"" + $(this).val() + "\" />");
        $("div:last").text($('option:selected', this).text());
    }).change();
});

DEMO