Switch out the image in the dropdown and update the button once it is selected

In this scenario, I am looking to dynamically change the image in a button dropdown when it is clicked. The goal is for the dropdown image to swap and replace with the actual one upon clicking. For reference, here's the fiddle: https://jsfiddle.net/320cxwo1/

<div class="btn-toolbar fixed-bottom" style="justify-content: center; display: flex;" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" style="cursor:pointer" class="img-border"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
    </div>

    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
            <ul class="dropdown-menu">
                <li><a href="#"> <img src="https://image.flaticon.com/icons/svg/1391/1391669.svg" class="img-border"
                            style="cursor:pointer" width="37px" height="37px"></a></li>
                <li><a href="#"> <img src="https://image.flaticon.com/icons/svg/1391/1391668.svg" class="img-border"
                            style="cursor:pointer" width="37px" height="37px"></a></li>
                <li><a href="#"> <img src="https://image.flaticon.com/icons/svg/1391/1391661.svg" class="img-border"
                            style="cursor:pointer" width="37px" height="37px"></a></li>
            </ul>
        </button>

    </div>
</div>
.btn-toolbar{
  text-align:center;
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
background-color:  #db9c31;
  border-color: #db9c31;
  color:#db9c31;
}
javascriptjquerycss

Answer №1

Here are some resources for both JS and jQuery:

JS only: Explore JS Fiddle here
jQuery: Try out jQuery on this page

For JS (vanilla), you can use the following code:

let dropDowmMenuLink = document.querySelectorAll('button.dropdown-toggle ul.dropdown-menu li');
for(let i = 0; i < dropDowmMenuLink.length; i++){
    dropDowmMenuLink[i].addEventListener('click', function(){
       var src = this.querySelector('a img').src;
       this.parentNode.parentNode.querySelector('img').src = src;
    });
}

If you prefer using jQuery, you can utilize the code snippet below:

$('button.dropdown-toggle ul.dropdown-menu li').on('click', function(){
    var src = $(this).find('a img').attr('src');
    $(this).parent().siblings('img').attr('src', src);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing a single state in React results in the modification of both states simultaneously

Whenever I attempt to modify one state, I find that another state is inexplicably changing as well. I've scoured my code for the issue but can't seem to pinpoint it. What steps should I take next? Here's the snippet of code in question: impo ...

javascriptreactjsreact-hooksjsxuse-state

"Why isn't the reordering functionality functioning properly after the button has been clicked

I have a question regarding menu options that contain text and a button. I need to open the menu option when the button is clicked. Unfortunately, I am facing an issue where rerendering is not working when I click on the button. Here is the link for refer ...

javascriptreactjs

Best Practices for Implementing JSON.stringify() with an AJAX Request

While I have a limited understanding of ajax and JSON, I am aware that using JSON.stringify in an ajax call can sometimes be beneficial. The ajax call below is functioning properly, whereas the one following it with the stringify method is not. I am unsure ...

javascriptjqueryjsonajax

Develop an interactive feature using React.js that allows users to manipulate the position of objects within a div

Looking to create a simple div with left and right buttons on either side that can shift the content in the center. An example of what I envision is shown here: Upon clicking the right arrow, the content should transition to this layout: Is there a Reac ...

javascriptreactjsmaterial-ui

Tips for verifying an alphanumeric email address

I need to create an email validation script that allows only alphanumeric characters. <script type = "text/javascript"> function checkField(email) { if (/[^0-9a-bA-B\s]/gi.test(email.value)) { alert ("Only alphanumeric characters and spaces are ...

javascriptajax

Utilizing Angular Filters to Assign Values to an Object within a Controller

I have a JSON example with multiple records, assuming that each name is unique. I am looking to filter out an object by name in the controller to avoid constant iteration through all the records using ng-repeat in my HTML. { "records": [ { "Name" : ...

javascriptangularjs

What is the proper way to attach the form tag action value in an EJS template?

Does anyone know about this? I am currently testing some JavaScript code: function mem_join_next() { if (document.mem_join.email.value == "") { alert("please input your email ID"); document.mem_join.email.focus(); return; } documen ...

javascripthtmlnode.jsejs

React Checkbox malfunctioning: Troubleshooting and solutions

I have thoroughly researched for a solution to my issue before resorting to posting this question. Unfortunately, none of the answers I found seemed to resolve my problem. Despite trying various methods such as changing, clicking, and checking, my checkbo ...

javascriptreactjs

Sending all form input data to Ajax for GET request

Today, my goal is to iterate through each textbox with an ID of setting_value, set its name and value to a key-value array, and then send that data in an Ajax request. The problem I'm facing is that it only seems to be inspecting the first instance o ...

javascriptphpjqueryajax

Modifying the Color of Individual Items within the Pagination Component in MUI

I am attempting to modify the background color of every item in my Pagination component by utilizing makeStyles. import { Pagination } from "@material-ui/lab"; import { makeStyles } from "@material-ui/core"; const pagination = makeStyl ...

javascriptcssreactjsmaterial-ui

Limiting the x-axis drag function in a grouped bar chart using D3.js

For those interested, here is the link to view the code snippet: http://jsfiddle.net/4tqn7162/1/. When dragging the bars left or right causing the width of svg plot to disappear, I am looking for a solution that can restrict this behavior without impacting ...

javascriptjqueryd3.jssvg

Problematic response design

On my responsive website, I am utilizing the hr tag in various places. However, I have noticed that some lines appear with different thicknesses, as shown in the example below. For a demonstration, you can view a sample on this fiddle: http://fiddle.jshel ...

htmlcssresponsive-design

Is the `beforeEach` function in Jasmine synchronized?

Is it guaranteed that multiple beforeEach functions will always run sequentially? beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); It appears they do. I conducted a tes ...

javascriptjasmine

Securing child paths in Vue.js

Having trouble protecting child routes from parent routes, facing some issues export default new Router({ routes: [ //frontend routes { {path: 'auth', component: Auth, children: authroutes, beforeEnter: (to, from, n ...

javascriptvue.jsvuejs2

Achieving uniform alignment of multiple field labels in Bootstrap and Simple Form

Here is the current layout of my form: https://i.sstatic.net/2vZjl.jpg You may notice that the labels are not properly aligned. I would like them to appear like this: https://i.sstatic.net/gm39D.jpg Below is the code for all the input fields: <%= si ...

htmlcssruby-on-railstwitter-bootstrapsimple-form

Design a visually stunning image grid with the use of Bootstrap 4

I am having difficulty creating an image grid with consistent spacing between columns, like shown in the image below: https://i.sstatic.net/azsxa.jpg The issue I am facing is aligning the right margin (red line), as illustrated below: https://i.sstatic. ...

htmlcssbootstrap-4css-grid

Can Vue.js be configured to reload specific components only?

Can a specific component be reloaded in a Vue component that contains multiple components? For example, if there is a component structured like this: Main component <template> <button>Button<button> <component1></component> ...

javascriptvue.jscomponentsreload

Trouble with AJAX/PHP form failing to transmit data

Hello everyone, I have created a form that is designed to send messages without reloading the page. I followed a tutorial from and adapted it to fit my requirements. Here is the PHP code: <?php session_start(); // Define some constants define( "RECIPI ...

phpajaxjquery

The Angular scope fails to reflect changes on the view

In this angular ng-click event, I have the following code: eventApp.controller('DetailEventController', ['$scope', '$http', '$compile', '$timeout', function ($scope, $http, $compile, $timeout, uiCalendarCon ...

javascriptangularjsangularjs-scope

Ignoring the incremented value in a jQuery function

I have been struggling to resolve this issue for quite some time now, and unfortunately, my lack of proficiency in javascript is hindering me. Here's a jfiddle with an interesting jquery code snippet that I came across: [html] <button id="addPro ...

javascriptjqueryincrement