How to display the selected image in bootstrap dropdown to another element

"I would like to put the selected image on the ""newImg_boat"" tab with the code below, but I am having a hard time because it doesn't work."
The code you are commenting out is the result of trying this and that.I've been thinking about it for about two days.
Thank you for your cooperation.

$(function(){
  $('.dropdown-menu.dropdown-item') .click(function(){
    variableItem=$('.dropdown-toggle',$(this).clost('.dropdown'));
    // var visibleItem_img = $('.dropdown-toggle', $(this).clost('.dropdown').clost('.dropdown')
    // var visibleItem_img = $('.dropdown-toggle', $('.dropdown_img') .closeest('.dropdown'));
    // var visibleItem_img = $('.dropdown-toggle', $(this).close('.dropdown').children('.dropdown_img'));
    // var visibleItem_img = $('.dropdown-toggle', $(this).children('.dropdown_img'));
    // var visibleItem_img = $('.dropdown_img', $(this).closeest('.dropdown'));
    // visibleItem.text($(this).attr('value'));
    // var visibleItem_img2 = visibleItem_img.text($(this).attr('src'));
    // visibleItem.text($(this).attr('src'));
    // var visibleItem_img = visibleItem.val($(this).attr('src'));
    // var visibleItem_img=$('.dropdown_img').attr('src');
    // console.log (visibleItem_img2);

    variableItem_img = $('.dropdown-toggle', $(this).find('.dropdown-img'));
    variableItem_img2 = visibleItem_img.text($(this).attr('src'));
    document.getElementById("newImg_boat").src=visibleItem_img2;

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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">Select yacht class</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">>
    <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><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><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>>>>
  </ul>
</div>

<div type="image" id="newImg_boat"></div>

javascript jquery html5 twitter-bootstrap

2022-09-30 18:00

1 Answers

There are two things you need to do to display the selected image as a different element:

Also, the code in the question statement tries to set a value for the src, type attribute of the div, type element, but the type attribute does not exist^[1]

Because the URL of the clicked element and the corresponding image is the src attribute of the child element of the clicked element, you can select the $("img",$(this)) element and use the method.You can also use the attr method to set this link to the src attribute of another element.When you do the above, you will see the code in the questionnaire as follows, indicating that the selected image is displayed in a different element.

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

<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/[email protected]/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">Select yacht class</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><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><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">

2022-09-30 18:00

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656