bootstrapとjqueryで作成したドロップダウンリストから選択した画像をブラウザに表示する方法

Question

・・・・・・
・・・・・・
<div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ヨットのクラスを選択</button>
        <ul class="dropdown-menu">
            <li><button class="dropdown-item" value="laser"><img class="dropdown_img" src="img/laser.PNG" alt="laser"></button></li>
            <li><button class="dropdown-item" value="laser radial"><img class="dropdown_img" src="img/laser_radial.PNG" alt="laser_radial"></button></li>
            <li><button class="dropdown-item" value="laser_4.7"><img class="dropdown_img" src="img/laser_4.7.PNG" alt="laser_4.7"></button></li>
            <li><button class="dropdown-item" value="470"><img class="dropdown_img" src="img/470.PNG" alt="470"></button></li>
            <li><button class="dropdown-item" value="snipe"><img class="dropdown_img" src="img/snipe.PNG" alt="snipe"></button></li>
            <li><button class="dropdown-item" value="taser"><img class="dropdown_img" src="img/taser.PNG" alt="taser"></button></li>
            <li><button class="dropdown-item" value="optimist"><img class="dropdown_img" src="img/optimist.PNG" alt="optimist"></button></li>
        </ul>
    </div>
・・・・・・
・・・・・・
・・・・・・
    <div type="image" id="newImg_boat"></div>
・・・・・・
・・・・・・
<script>
・・・・・・
$(function(){
        $('.dropdown-menu .dropdown-item').click(function(){
            var visibleItem = $('.dropdown-toggle', $(this).closest('.dropdown'));
            visibleItem.text($(this).attr('value'));
        });
    });

・・・・・・
<script>

ドロップダウンリストにvalue属性の値を取得して選択後にドロップダウンリストに表示することはできましたが、選択した画像を取得し、divタグ”newImg_boat”に表示できません。
どうすればよろしいでしょうか？
ご教示お願いいたします。

Answer 1

選択した画像を別の要素で表示するために行う必要があることは、以下の二つです:

1. クリックされた要素と対応する画像の URL を得る。
2. 手順 1 で得た URL を別の要素の src 属性へ設定する。

また、質問文のコードでは div 要素の src, type 属性へ値を設定しようとしていますが、 **div 要素に src, type 属性は存在しない**ため、正常に画像が表示出来ません。そのため、今回の回答では div 要素を img 要素に差し替えます。

クリックされた要素と対応する画像の URL は、クリックされた要素の子要素の src 属性であるため、 $("img", $(this)) として当該 img 要素を選択し、 attr メソッドを使用することで得られます。この URL を別の要素の src 属性へ設定する場合にも attr メソッドを使用出来ます。以上を行うと、質問文のコードは以下のようになり、選択した画像が別の要素へ表示されていることがわかります (動作確認用リンク)。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ヨットのクラスを選択</button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" value="laser"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=laser.PNG" alt="laser"></button></li>
    <li><button class="dropdown-item" value="laser radial"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=laser_radial.PNG" alt="laser_radial"></button></li>
    <li><button class="dropdown-item" value="laser_4.7"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=laser_4.7.PNG" alt="laser_4.7"></button></li>
    <li><button class="dropdown-item" value="470"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=470.PNG" alt="470"></button></li>
    <li><button class="dropdown-item" value="snipe"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=snipe.PNG" alt="snipe"></button></li>
    <li><button class="dropdown-item" value="taser"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=taser.PNG" alt="taser"></button></li>
    <li><button class="dropdown-item" value="optimist"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=optimist.PNG" alt="optimist"></button></li>
  </ul>
</div>

<img id="newImg_boat">

$(function() {
  $('.dropdown-menu .dropdown-item').click(function() {
    var item = $("img", $(this));
    var src = item.attr("src");
    $("#newImg_boat").attr("src", src);
  });
});

Comments

[hiro-chan]

ありがとうございます。無事に画像を表示できました。
これでコーディングが前に進みます。
大変感謝いたします。

[s8_chu]

解決されたようで良かったです。
マルチポスト先についても同様に、質問を解決済みにしておくと良いと思います。

[hiro-chan]

ありがとうございます。

Answer 2

$(function(){
        $('.dropdown-menu .dropdown-item').click(function(){
            var visibleItem = $('.dropdown-toggle', $(this).closest('.dropdown'));
            visibleItem.text($(this).attr('value'));
        });
    });

この.click(function(){~~}); の中の $(this) はクリックされた要素なので、その要素から見て $(this).closest('.dropdown') は一番近い dropdown クラスをもつ親要素ですよね。
ここまで理解できていれば、あとはjQueryのリファレンスからやりたいことを実現できる関数を調べるだけだと思います。（実際、やり方は何種類もあります。）
参考１： Traversing - jQuery日本語リファレンス
参考２： Manipulation - jQuery日本語リファレンス

Comments

[hiro-chan]

コメントありがとうございます。
var visibleItem = $('.dropdown-toggle', $(this).closest('.dropdown'));の下に以下のようにコーディングしても取得できないです。対処がどうしたらいいかわかりません。
var visibleItem_img = $('.dropdown-toggle', $(this).closest('.dropdown').closest('.dropdown'));
var visibleItem_img2 = visibleItem_img.text($(this).attr('src'));
document.getElementById("newImg_boat").src = visibleItem_img2;

[hiro-chan]

もしくは以下のコードを追加してもうまくいきません。
var visibleItem_img = $('.dropdown-toggle', $(this).closest('.dropdown'));
visibleItem_img.text($(this).attr('src'));
document.getElementById("newImg_boat").src = visibleItem_img;

[hiro-chan]

もしくは以下のコードを挿入しても結果はうまくいきません。
var visibleItem_img = $('.dropdown-toggle', $(this).find('.dropdown-img'));
var visibleItem_img2 = visibleItem_img.text($(this).attr('src'));
document.getElementById("newImg_boat").src = visibleItem_img2;

[guissy-k]

$('.dropdown-toggle', $(this).find('.dropdown-img'));
ご提示いただいている上記の記載方法は、jQuery()関数の第２引数まで指定する方法ですよね。
https://api.jquery.com/jQuery/#jQuery-selector-context

$(A, B) とした場合、「Bに該当する要素のうちAにも該当するもの」という形になるので
> $('.dropdown-toggle', $(this).find('.dropdown-img'));
こちらはおかしいことが分かります。

また、dropdown-img ではなくdropdown_img ですよね。
この辺りを踏まえて
var visibleItem_img = $(this).find('.dropdown_img');
で実行してみてもらえますか？
（私の方では再現環境を作っていないのでちゃんと動作するか分かりませんが）

[hiro-chan]

ありがとうございます。
functionの中身を以下の通りにしましたが、表示されないようです。
var visibleItem = $('.dropdown-toggle', $(this).closest('.dropdown'));
var visibleItem_img = $(this).find('.dropdown_img');
visibleItem.text($(this).attr('value'));
document.getElementById("newImg_boat").src =visibleItem_img.text($(this).attr('src'));

[hiro-chan]

以前はブラウザのF12ボタンのコンソールでエラーがでていましたが、それは改善しています。
少しずつ改善に向かっているようです。

[hiro-chan]

解決に進む中で、this等の意味・使い方についてご教示いただきありがとうございました。