Javascript 当通过下拉菜单选择时，如何添加图片事件？

这是我的HTML代码：

<select>
<option>Pic1</option>
<option>Pic2</option>
<option>Pic3/option>
<option>Pic4</option>
</select>

图1
图2
Pic3/选项>
图4

对不起，我的代码， 我只是在shcool学习

我想制作一个事件，在75%的witdh中选择一个选项标签并在屏幕中居中时添加一张图片

---

我还没有完全了解javascript，所以很抱歉，您可以在更改事件中使用jquery和更改图像， 我已使用数据属性获取图像URL：

请参阅下面的代码片段

$（函数（）{
$（“#选择图片”）。关于（“更改”，函数（e）{
var url=$（this）.find（':selected'）.data（'pic-url'）；
如果（url）{
$（“#图片”）.attr（'src'，url）；
}
否则{
$（“#图片”）.attr（“src”，”）；
}
})
});
#图片{
宽度：70%；
高度：200px；
位置：相对位置；
保证金：自动；
}
.集装箱{
文本对齐：居中；
}

图1
图2
图3
图4
您可以在更改事件中使用jquery和更改图像，
我已使用数据属性获取图像URL：

请参阅下面的代码片段


$（函数（）{
$（“#选择图片”）。关于（“更改”，函数（e）{
var url=$（this）.find（':selected'）.data（'pic-url'）；
如果（url）{
$（“#图片”）.attr（'src'，url）；
}
否则{
$（“#图片”）.attr（“src”，”）；
}
})
});
#图片{
宽度：70%；
高度：200px；
位置：相对位置；
保证金：自动；
}
.集装箱{
文本对齐：居中；
}

图1
图2
图3
图4
我想出了这个解决方案：


var图片={
“Pic1”：http://via.placeholder.com/500x200/9575cd/ffffff",
“图2”：http://via.placeholder.com/500x200/64b5f6/ffffff",
“图3”：http://via.placeholder.com/500x200/4db6ac/ffffff",
“图4”：http://via.placeholder.com/500x200/ffb74d/ffffff",
};
var容器=$（“#图像容器”）；
$（“选择”）。在（“更改”上，函数（事件）{
变量元素=$（“选项：已选定”，此），
value=element.text（），
图像=图片[值]| |空，
imageElement=$（“#图像容器>img”）；
如果（图像！==null）{
imageElement.show（）；
//如果图像未定义，请不要更改任何内容。
如果（imageElement.length>0）{
attr（“src”，image）；
}否则{
container.append（“”）
}
}否则{
imageElement.hide（）；
}
});
#图像容器{
利润率：10px0；
文本对齐：居中；
}
#图像容器>img{
宽度：75%；
}

选择一个图像
图1
图2
图3
图4
图5
我想出了这个解决方案：


var图片={
“Pic1”：http://via.placeholder.com/500x200/9575cd/ffffff",
“图2”：http://via.placeholder.com/500x200/64b5f6/ffffff",
“图3”：http://via.placeholder.com/500x200/4db6ac/ffffff",
“图4”：http://via.placeholder.com/500x200/ffb74d/ffffff",
};
var容器=$（“#图像容器”）；
$（“选择”）。在（“更改”上，函数（事件）{
变量元素=$（“选项：已选定”，此），
value=element.text（），
图像=图片[值]| |空，
imageElement=$（“#图像容器>img”）；
如果（图像！==null）{
imageElement.show（）；
//如果图像未定义，请不要更改任何内容。
如果（imageElement.length>0）{
attr（“src”，image）；
}否则{
container.append（“”）
}
}否则{
imageElement.hide（）；
}
});
#图像容器{
利润率：10px0；
文本对齐：居中；
}
#图像容器>img{
宽度：75%；
}

选择一个图像
图1
图2
图3
图4
图5
您可以使用JQuery



函数AddImage（）{
var pathImg=$（“#mySelect选项：selected”）.val（）；
var htmImg=“”；
$（“#destiny”）.html（htmImg）；
}
图1
图2
图3
您可以使用JQuery



函数AddImage（）{
var pathImg=$（“#mySelect选项：selected”）.val（）；
var htmImg=“”；
$（“#destiny”）.html（htmImg）；
}
图1
图2
图3
你学过js吗？也许值得花一点时间了解基本知识，然后在遇到错误时再回来。您应该首先搜索并尝试解决问题，向我们提供您迄今为止尝试过的内容和不起作用的内容。您是否学习过js？也许值得花一点时间了解基本知识，然后在遇到错误时再回来。你应该首先搜索并尝试解决问题，向我们提供你迄今为止尝试过的内容和不起作用的内容。我认为OP要求图像“75%的witdh，集中在屏幕上”。我认为OP要求图像“75%的witdh和屏幕居中”