Javascript 下拉列表（选择框）获取所选内容的名称

我有这个密码

我有我的代码的图片部分工作，它会改变图片，每次你选择一个值

我要显示的是值的实际名称“Image 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>

$（文档）.ready（函数（）{
$（“#图像”）.change（函数（）{
$（“#图像预览”）.empty（）；
$（“#图像预览”）。追加（“”）；
}).change（）；
});
$（“#图像选项：选定”）.text（）；{
$（“div”）.text（str）；
}
-所有-
图1.jpg
图像2.jpg
图像3.jpg
在此处显示图像

编辑：类似这样的内容：

试试看

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

$（文档）.ready（函数（）{
$（“#图像”）。更改（函数（）{
$（“#图像预览”）.empty（）；
$（“#图像预览”）。追加（“”）；
$（“div:last”）.text（$（'option:selected'，this.text（））；
}).change（）；
});

---

真的对你的要求感到困惑吗。。？你能给它添加更多的细节吗？我想在图片旁边显示所选元素的名称。所以，当图片显示在下面时，它会写下图片1，并且名称会随着选项的每次更改而更改。为什么要降级您不理解的内容？div:last做什么？如果删除最后一个，会发生什么？它似乎疯狂地复制？@op1001根据您提供的演示，我们必须将文本显示到最后一个div中，对吗。。？这就是为什么我使用了

：最后一个
选择器的原因。。更好的选择是向displayer div添加一个id，并将其id替换为
div:last
。。像这样的，对吗？如果你把最后一个拿出来，它就会像这样不断重复。