Help with SubMenus

Hi

Can someone post me an example of a submenu (select) being populated dependent upon the choice of the the first (primary) menu.

I understand that this is done with Javascript. I can familiar with HTML / PHP but am a little weaker on Javascript.

i.e If the user selects car - we see the second sub menu, if they select train, we see alternative train sub- menu?

I am a lost by the examples I have found on the web (fiddle etc.) and would be most grateful of a sample solution (or any simple samples).

Thanks!
EXAMPLE:
Primary Menu

<select>
<option>car</option>
<option>train</option>
</select>

if car

<select>
<option>Porsch</option>
<option>Lada</option>
<option>Volkswagon</option>
</select>

if train

<select>
<option>Steam Train</option>
<option>Diesel Train</option>
<option>Electric Train</option>
</select>

Hi Karen

There have been a couple of topics on this subject recently. Does this How to auto-fill 2 drop-down and text-box based upon on the first drop-down value selected? - #7 by droopsnoot help? It’s using jQuery rather than vanilla JS.

Hi, I looked at your example and some of the others also -then reviewed others online.

Here is what I did

  1. First, I tried making the two sub-menus disappear as follows:

test.html

<!doctype>
<html>
	<head></head>
	<body>
		<label>Select Subject</label>
		<select id="subject">
			<option>Choose your subject</option>
			<option value="science">Science</option>
			<option value="language">Language</option>
		</select>
		<br />
		<label>Select Category</label>
		<select class="hide" id="science">
			<option>Biology</option>
			<option>Physics</option>
		</select>
		<select class="hide" id="language">
			<option>English</option>
			<option>French</option>
		</select>
		<script src="jquery-3.2.1.min.js"></script>
		<script src="test.js"></script>
	</body>
</html>

and I wrote the following jquery by poking around

test.js

$(function() {

// Hide the sub menus with the class of 'hide'
$(".hide").hide();

//Look for the select menu 'selection'
$('#subject').change(function() {

	//Get what is chosen
	var $option = $(this).find('option:selected');

	//Get the value of what is chosen
	var vl = $option.val();

	// Show (unhide) the id of what is chosen
	$('#'+vl).show();

	// and keep hidden what is not chosen
	$('.hide').not('#'+vl).hide();
	});	
});

… But it looked messy as you could see the sub-menus ‘hide’ when you opened the page.

So, I rewrote it for the sub-menus to be created and added to the page after the selection menus is chosen:

test1.html

<!doctype html>
<html>
	<head></head>
	<body>
		<label>Select Subject</label>
                <select id="subject">
                        <option>Choose your subject</option>
                        <option value="science">Science</option>
                        <option value="language">Language</option>
                </select>

		<script src="jquery-3.2.1.min.js"></script>
		<script src="test1.js"></script>
	</body>
</html>

test1.js

$(function() {

// Look for a change in the element with the id subject (here a drop down select menu)
$('#subject').change(function() {

	// Remove previous write if called againappended if called again
        $('.new').remove();

	// Get what the user selected in the drop box
        var $option = $(this).find('option:selected');

	// Get the value of what is selected
        var $vl = $option.val();

	// If the value is 
	if ($vl == 'science') {

		// What we will write to the screen
		var $el = $('<br /><label class="new">Select Category</label><select class="new"><option>Choose your category</option><option>Biology</option><option>Physics</option></select>');

		//Here is where and that we put it
		$('#subject').after($el);
	}
	else {

		//Here is what we will write to the screen
		var $el = $('<br /><label class="new">Select Category</label><select class="new"><option>Choose your category</option><option>English</option><option>French</option></select>');

		//Here is where and that we will put it
		$('#subject').after($el);
	}
     });
});

that was more ‘elegant’ and certainly looked better on the page.

Now, I need to add sql query to populate the select menu, but I think I will be able to figure that out.

Thanks :slight_smile:
Karen

2 Likes

Could you have the CSS for those elements set to ‘hidden’, and then show them if they need to be shown? I guess there’s a chance they might appear while the CSS is loading, but then perhaps you could use in-page CSS to stop that.

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