javascript - 下拉(选择框)获取选择的名称

Question

我在 Fiddle Code 上有这段代码

我的代码的图片部分正在运行，每次您选择一个值时它都会更改图片。

我想显示的是值的实际名称“Image 1”.. 所以 Image 1 等

我浏览了 stackoverflow 并找到了一些示例，我尝试实现它们，但我无法让它工作。

简而言之，当您选择一个值时...它将显示图片，并在空的 div 中显示名称

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

编辑:像这样的东西:EXAMPLE

Answer 1

尝试，

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

DEMO