下拉列表（選擇框）獲取選擇名稱

Question

我在小提琴代碼上有這個代碼

我的代碼的圖片部分工作，每次選擇一個值時它都會改變圖片。

我要顯示的是值的實際名稱“圖像1”..所以圖像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>

編輯：這樣的事情： 例子

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