これらは私のHTMLコードです：ドロップダウンメニューで画像イベントを追加する方法は？
<select>
<option>Pic1</option>
<option>Pic2</option>
<option>Pic3/option>
<option>Pic4</option>
</select>
、 私はちょうどほとんど私がオプションタグが75で選択されている状態で、画像を追加し、イベントを作りたいshcool
で学んでいますwitdhの％と画面
を中心に、私は私がしたすべてのjavascriptを学ぶ、あなたが変更イベントにjQueryと変更画像を使用することができます
洙申し訳ありませんが、 されていません使用されるデータは、画像のURLを取得する属性：
は、以下を参照してください
$(function(){
$("#select-pic").on("change",function(e){
var url = $(this).find(':selected').data('pic-url');
if(url) {
$("#picture").attr('src',url);
}
else {
$("#picture").attr("src", "");
}
})
});#picture {
width:70%;
height:200px;
position:relative;
margin:auto;
}
.container {
text-align:center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-pic">
<option></option>
<option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture1' >Pic1</option>
<option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture2' >Pic2</option>
<option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture3' >Pic3</option>
<option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture4' >Pic4</option>
</select>
<div class="container">
<img id="picture" />
</div>私はOPがイメージを要求したと思う "_ witdhの75％と画面の中心に" _ –
thnx @ JamesDouglas –
が、私はこの解決策を考え出したスニペット：
var pictures = {
"Pic1": "http://via.placeholder.com/500x200/9575cd/ffffff",
"Pic2": "http://via.placeholder.com/500x200/64b5f6/ffffff",
"Pic3": "http://via.placeholder.com/500x200/4db6ac/ffffff",
"Pic4": "http://via.placeholder.com/500x200/ffb74d/ffffff",
};
var container = $("#image-container");
$("select").on("change", function (event) {
var element = $("option:selected", this),
value = element.text(),
image = pictures[value] || null,
imageElement = $("#image-container > img");
if (image !== null) {
imageElement.show();
// don' change anything if the image is not defined.
if (imageElement.length > 0) {
imageElement.attr("src", image);
} else {
container.append('<img src="' + image + '" alt="wide image" />')
}
} else {
imageElement.hide();
}
});#image-container {
margin: 10px 0;
text-align: center;
}
#image-container > img {
width: 75%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option selected disabled>Choose an image</option>
<option>Pic1</option>
<option>Pic2</option>
<option>Pic3</option>
<option>Pic4</option>
<option>Pic5</option>
</select>
<div id="image-container"></div>基本的には、選択と関連する画像パスからすべてのオプションテキストを持つオブジェクトを定義し、選択メニューのすべての変更をリッスンし、選択したオブジェクトに応じて画像を表示または非表示にします。私たちは、CSSを使用して画像を中央に置き、画像を中央に伸ばし、中央に配置します。
picturesオブジェクトで定義されていないオプションテキストがある場合、イメージ要素は非表示になり、選択されたオプションテキストが存在するまで表示されません。
あなたはjQueryの
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function AddImage(){
\t var pathImg = $("#mySelect option:selected").val();
\t var htmImg = "<img src='"+ pathImg +"'>";
\t $("#destiny").html(htmImg);
}
</script>
</head>
<body>
<select id="mySelect" onchange="AddImage()">
<option></option>
<option value="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg">pic1</option>
<option value="https://www.w3schools.com/css/trolltunga.jpg">pic2</option>
<option value="https://static.pexels.com/photos/34950/pexels-photo.jpg">pic3</option>
</select>
<div id="destiny" style="width:75%; text-align: center;"></div>
</body>
</html>
を使用することができますが、あなたは、任意のJSを学んだことがありますか？基本を理解し、エラーに陥ったときに戻って少し時間を費やす価値があります。 –
まず最初に検索して問題を解決し、今まで試したことと動作していないことを教えてください。 –