I coded a dropdown menu with radio button to change currency in my website. I use jQuery to open/close this dropdown but the currency change doesn't work.
The expanded class is used to open/close the dropdown menu.
I think that the error comes from the line $('#' + $(e.target).attr('for')).prop('checked', true); but I don't know how to modify this. I want it to check the right input.
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#' + $(e.target).attr('for')).prop('checked', true);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});.maincar__currency {
display: flex;
flex-direction: column;
min-height: 32px;
max-height: 32px;
margin-left: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
box-sizing: border-box;
box-shadow: $shadowBox;
font-size: 14px;
font-weight: 500;
}
.maincar__currency label {
display: flex;
width: 80px;
height: 32px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
margin-right: 0 auto;
background-color: #fff;
text-align: center;
color: $mediumMainGrey;
cursor: pointer;
//box-sizing: border-box;
}
.maincar__currency label:hover {
background-color: $extraLightGrey;
}
.currency {
display: flex;
width: 100%;
}
.currency input {
display: none;
}
.currency img {
//object-fit: contain;
height: 20px;
width: auto;
margin-right: 6px;
}
.currency span {
display: flex;
//align-items: center;
color: $mediumMainGrey;
text-decoration: none;
}
.expanded {
max-height: 128px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="maincar__currency"><label for="euro-radio-is"><div class="currency currency__euro"><img src="/assets/images/icons/euro.png" alt="Euro sign"><input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true"><span class="default">EUR</span></div></label><label for="dollar-radio-is"><div class="currency currency__dollar"><img src="/assets/images/icons/dollar.png" alt="Dollar sign"><input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar"><span>USD</span></div></label><label for="gbp-radio-is"><div class="currency currency__pound"><img src="/assets/images/icons/pound-sterling.png" alt="Pound sign"><input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp"><span>GBP</span></div></label><label for="chf-radio-is"><div class="currency currency__chf"><img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign"><input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf"><span>CHF</span></div></label></div>