How to change dropdown menu content based on selection?

I am trying to change the content inside my dropdown menu based on the selection of the LI.

My code:

<div class="dropdown">
	<a type="text" class="dropdown__button dropdown__button--select dropdown__button--closed">ik ben / een</a>
	<ul class="dropdown__list--select dropdown__list--closed">
		<li>Particulier</li>
		<li>Bedrijf</li>
		<li>Intermediair</li>
	</ul>
</div>

<div class="dropdown">
	<a type="text" class="dropdown__button dropdown__button--product dropdown__button--closed">Maak een keuze</a>
	<ul class="dropdown__list--product dropdown__list--closed">
		<li>Sparen / beleggen</li>
		<li>Kinderrekening</li>
		<li>Pensioen opbouwen</li>
		<li>Vermogensopbouw</li>
		<li>Makkelijk overstappen</li>
	</ul>
</div>

So for example if you select the FIRST dropdown value particulier, bedrijf the A tag INNERHTML should change based on the selection of my LI.

If you select one of the first 3 options from the first, the CONTENT in the second dropdown should display different LIST items.

But i cant manage to solve this :S…

My JS:

(() => {
	let splitScreen = document.getElementById("splitscreen"),
		headerHome = document.querySelector('.header--home'),
		headerContent = document.querySelector('.header__content'),
		dropdownButtonSelect = document.querySelector('.dropdown__button.dropdown__button--select'),
		dropdownButtonProduct = document.querySelector('.dropdown__button.dropdown__button--product'),
		dropdownListSelect = document.querySelector('.dropdown__list--select'),
		dropdownListProduct = document.querySelector('.dropdown__list--product'),
		dropdownListSelectItems = dropdownListProduct.getElementsByTagName('li'),
		buttonClosedClass = 'dropdown__button--closed',
		listClosedClass = 'dropdown__list--closed';

	if (splitScreen) {

		// Activate background visual animation (JS needed to change overflow)
		headerContent.classList.remove('header__content--hidden');

		setTimeout(() => {
			headerHome.classList.remove('header--no-overflow');
		}, 0);

		// Dropdown selector interaction
		dropdownButtonSelect.addEventListener('click', showDropdownSelect);
		dropdownButtonProduct.addEventListener('click', showDropdownProduct);
		dropdownListProduct.addEventListener('click', dropdownListItemsSelect);
	}

	function dropdownListItemsSelect(){
	}

	function showDropdownSelect(e) {
		e.preventDefault();

		if(dropdownListSelect.classList.contains(listClosedClass)) {
			dropdownButtonSelect.classList.toggle(buttonClosedClass);
			dropdownListSelect.classList.toggle(listClosedClass);
		} else {
			dropdownButtonSelect.classList.toggle(buttonClosedClass);
			dropdownListSelect.classList.toggle(listClosedClass);
		}
	}

	function showDropdownProduct(e){
		e.preventDefault();

		if(dropdownListProduct.classList.contains(listClosedClass)) {
			dropdownButtonProduct.classList.toggle(buttonClosedClass);
			dropdownListProduct.classList.toggle(listClosedClass);
		} else {
			dropdownButtonProduct.classList.toggle(buttonClosedClass);
			dropdownListProduct.classList.toggle(listClosedClass);
		}
	}


})();

Can someone help me please?

Hey there. Can you provide me with a codepen or any other interactive test case? It is hard to imagine how it is supposed to work, when I have nothing to see :slight_smile: I pasted the script and html to a codepen, but without the style, it didn’t do that much.

Than you very . much sir… i have figured it out with less more code.

(() => {
	let	splitScreen = document.getElementById("splitscreen"),
		headerHome = document.querySelector('.header--home'),
		headerContent = document.querySelector('.header__content'),
		submitButton = document.querySelector('button'),
		dropdownMenus = document.querySelector('.dropdown__menus'),
		dropdownControls = dropdownMenus.querySelectorAll('.dropdown__menu'),
		dropdownData = dropdownMenus.querySelectorAll('.dropdown__data'),
		dropdownOptions = dropdownMenus.querySelectorAll('.dropdown__option');

	if(!dropdownMenus) {
		return;
	}

	// Loop thrue all dropdown__Menus & Values
	[].forEach.call(dropdownControls, prepareDropdowns);

	function prepareDropdowns(control) {
		if (splitScreen) {

			// Activate background visual animation (JS needed to change overflow)
			headerContent.classList.remove('header__content--hidden');

			setTimeout(() => {
				headerHome.classList.remove('header--no-overflow');
			} /* ,2700 */ );

			// forEach dropdown__option data Attr "data-value" set the selected value inside the submit button HREF.
			if(dropdownOptions.length > 0) {
				[].forEach.call(dropdownOptions, (dropdownOption) => {
					dropdownOption.addEventListener('click', function() {
						// Create Attribute HREF if data-value exists only.
						if (dropdownOption.getAttribute('data-value')) {
							submitButton.setAttribute('href', dropdownOption.getAttribute('data-value'));
						}						
					});
				});
			}
			// Dropdown #1
			if (control.classList.contains('dropdown__first')) {
				let dropdown = control.querySelector('.dropdown');
				new control.Dropdown({
					element: dropdown,
					hideCurrent: true,
					placeholder: 'Maak een keuze'
				});
			}
			// Dropdown #2
			if (control.classList.contains('dropdown__second')) {
				let dropdown = control.querySelector('.dropdown');				
				new control.Dropdown({
					element: dropdown,
					hideCurrent: true,
					placeholder: 'Maak een keuze'
				});
			}
		}
	}

})();

Can you help me… and tell me how i can use for example “dropdown__menu1”, “dropdown__menu2” but the class name menu1 and menu2 to be dynamic instead of hard coded?

I want to toggle,add,remove different UL > LI items based on the dropdown selection client, company etc.

HTML:

<div class="dropdown__menus">
	<div class="dropdown__menu dropdown__first">
		<div class="dropdown">
			<div class="dropdown__selected"></div>
				<ul class="dropdown__data">
					<li class="dropdown__option">Particulier</li>
					<li class="dropdown__option">Bedrijf</li>
					<li class="dropdown__option">Intermediair</li>
				</ul>
				<input type="hidden" class="dropdown__input">
				<span class="calculator__symbol calculator__symbol--chevron dropdown__chevron"></span>
			</div>
		</div>

		<div class="dropdown__menu dropdown__second">
			<div class="dropdown">
				<div class="dropdown__selected"></div>
				<ul class="dropdown__data">
					<div class="dropdown__t1">
						<li class="dropdown__option" data-value="/sparen-beleggen">Sparen / beleggen</li>
						<li class="dropdown__option" data-value="/kinderrekening">Kinderrekening</li>
						<li class="dropdown__option" data-value="/pensioen-ombouwen">Pensioen opbouwen</li>
						<li class="dropdown__option" data-value="/vermogensopbouw">Vermogensopbouw</li>
						<li class="dropdown__option" data-value="/overstappen">Makkelijk overstappen</li>
					</div>
					<div class="dropdown__t2">
						<li class="dropdown__option" data-value="/sparen-beleggen">Sparen / beleggen</li>
						<li class="dropdown__option" data-value="/kinderrekening">Kinderrekening</li>
						<li class="dropdown__option" data-value="/pensioen-ombouwen">Pensioen opbouwen</li>
						<li class="dropdown__option" data-value="/vermogensopbouw">Vermogensopbouw</li>
						<li class="dropdown__option" data-value="/overstappen">Makkelijk overstappen</li>
					</div>
				</ul>
				<input type="hidden" class="dropdown__input">
				<span class="calculator__symbol calculator__symbol--chevron dropdown__chevron"></span>
			</div>
		</div>
	</div>
	<button type="submit" class="button button--submit button--primary button--wobble button--wobble__hover">Ja, ik wil meer ontdekken!</button>

How can i create a dynamic class thanks!

You can’t have a <div> as the direct child of an unordered list <ul>, only <li>s.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.