I'm trying to create a number of dropdowns on one page that choose radio buttons based on the selection from that dropdown.
It's half working, the radio button IS changing per choice, however I can't get the dropdown to close and retain the selector when chosen. Wondering if it's to do with the JS - fiddle below
Fiddle: https://jsfiddle.net/8b069fj2/
$("input").on("change", function () {
var inputName = this.name;
$("#select-' + inputName + '-btn").html(this.checked ? this.value : "");
});
$(".js-option").on("click", function () {
$(this).parent().find("ul").toggleClass("js-drop");
});
you are mssing the click handler for list elements so the following worked for me:
$('input').on('change', function() {
var inputName = this.name;
console.log(inputName);
var selector = '#select-' + inputName + '-btn';
$(selector).html(this.checked ? this.value : '');
});
$('.js-option').on('click', function() {
$(this).parent().find('ul').toggleClass("js-drop");
});
$('li .js-option').on('click',function(){
$(this).closest('ul').toggleClass("js-drop");
})