how to change options in a selection based on the chosen option in another selection

I have tried to use javascript/j-query to change options in the 2nd selection depending on the choice in the 1st selection.

I think the reason the javascript isn't working is because of other javascript that is used to style the dropdown.

If you have extra time, I would be grateful if you also show me how to link it to another dropdown called subjects (topic dropdown's choices depend on the subject and the qualification).

Finally, if you find a better solution that uses another language like php, I would accept that too.

Edit: A lot of people were stripping down the styling and the other js function.

The answers you give me are correct, but they won't work for me, probably because the problem lies in the other javascript function (the one that allows me to style the dropdown).

If you answer my question; it would be more helpful to include the problematic js function, since an answer that includes that will work for me.

Thanks

$(document).ready(function () 
 $("#level").change(function () 
 var val = $("#level").val();
 if (val === "GCSE") 
 $("#topic").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
 
		else if (val === "asLevel") 
 $("#topic").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
 
		else if (val === "aLevel") 
 $("#topic").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
 
 );
);

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) 
	selElmnt = x[i].getElementsByTagName("select")[0];
	/*for each element, create a new DIV that will act as the selected item:*/
	a = document.createElement("DIV");
	a.setAttribute("class", "select-selected");
	a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
	x[i].appendChild(a);
	/*for each element, create a new DIV that will contain the option list:*/
	b = document.createElement("DIV");
	b.setAttribute("class", "select-items select-hide");
	for (j = 0; j < selElmnt.length; j++) 
		/*for each option in the original select element,
		create a new DIV that will act as an option item:*/
		c = document.createElement("DIV");
		c.innerHTML = selElmnt.options[j].innerHTML;
		c.addEventListener("click", function(e) 
			/*when an item is clicked, update the original select box,
			and the selected item:*/
			var y, i, k, s, h;
			s = this.parentNode.parentNode.getElementsByTagName("select")[0];
			h = this.parentNode.previousSibling;
			for (i = 0; i < s.length; i++) 
				if (s.options[i].innerHTML == this.innerHTML) 
					s.selectedIndex = i;
					h.innerHTML = this.innerHTML;
					y = this.parentNode.getElementsByClassName("same-as-selected");
					for (k = 0; k < y.length; k++) 
						y[k].removeAttribute("class");
					
					this.setAttribute("class", "same-as-selected");
					break;
				
			
			h.click();
		);
		b.appendChild(c);
	
	x[i].appendChild(b);
	a.addEventListener("click", function(e) 
		/*when the select box is clicked, close any other select boxes,
		and open/close the current select box:*/
		e.stopPropagation();
		closeAllSelect(this);
		this.nextSibling.classList.toggle("select-hide");
		this.classList.toggle("select-arrow-active");
	);


function closeAllSelect(elmnt) 
	/*a function that will close all select boxes in the document,
	except the current select box:*/
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>

<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>

<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

Dominique Fortin, here is your previous script with the closeAllSelect function 'activated' (not comment)

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

edited Nov 22 '18 at 11:49

asked Nov 14 '18 at 19:13

Abdul

3610

This code works for me. I am not sure what the code outside of the doc.ready is supposed to be doing, but the #topic options change when the user selects a new value for #level

– Katie.Sun
Nov 14 '18 at 20:15

When I run it, the options of the topic dropdown dont change based on the qualification I pick.

– Abdul
Nov 14 '18 at 20:21

codepen.io/katiedotson/full/MzmWab

– Katie.Sun
Nov 14 '18 at 20:27

The unchange event will never trigger. Look at Setting selectedindex not triggering onchange event.

– Dominique Fortin
Nov 14 '18 at 22:27

The main thing is to add $(s).change(); after s.selectedIndex = i;. I think you should wrap the logic of this dropdown into an object for reusability.

– Dominique Fortin
Nov 15 '18 at 15:46

add a comment |

I have tried to use javascript/j-query to change options in the 2nd selection depending on the choice in the 1st selection.

I think the reason the javascript isn't working is because of other javascript that is used to style the dropdown.

If you have extra time, I would be grateful if you also show me how to link it to another dropdown called subjects (topic dropdown's choices depend on the subject and the qualification).

Finally, if you find a better solution that uses another language like php, I would accept that too.

Edit: A lot of people were stripping down the styling and the other js function.

The answers you give me are correct, but they won't work for me, probably because the problem lies in the other javascript function (the one that allows me to style the dropdown).

If you answer my question; it would be more helpful to include the problematic js function, since an answer that includes that will work for me.

Thanks

$(document).ready(function () 
 $("#level").change(function () 
 var val = $("#level").val();
 if (val === "GCSE") 
 $("#topic").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
 
		else if (val === "asLevel") 
 $("#topic").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
 
		else if (val === "aLevel") 
 $("#topic").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
 
 );
);

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) 
	selElmnt = x[i].getElementsByTagName("select")[0];
	/*for each element, create a new DIV that will act as the selected item:*/
	a = document.createElement("DIV");
	a.setAttribute("class", "select-selected");
	a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
	x[i].appendChild(a);
	/*for each element, create a new DIV that will contain the option list:*/
	b = document.createElement("DIV");
	b.setAttribute("class", "select-items select-hide");
	for (j = 0; j < selElmnt.length; j++) 
		/*for each option in the original select element,
		create a new DIV that will act as an option item:*/
		c = document.createElement("DIV");
		c.innerHTML = selElmnt.options[j].innerHTML;
		c.addEventListener("click", function(e) 
			/*when an item is clicked, update the original select box,
			and the selected item:*/
			var y, i, k, s, h;
			s = this.parentNode.parentNode.getElementsByTagName("select")[0];
			h = this.parentNode.previousSibling;
			for (i = 0; i < s.length; i++) 
				if (s.options[i].innerHTML == this.innerHTML) 
					s.selectedIndex = i;
					h.innerHTML = this.innerHTML;
					y = this.parentNode.getElementsByClassName("same-as-selected");
					for (k = 0; k < y.length; k++) 
						y[k].removeAttribute("class");
					
					this.setAttribute("class", "same-as-selected");
					break;
				
			
			h.click();
		);
		b.appendChild(c);
	
	x[i].appendChild(b);
	a.addEventListener("click", function(e) 
		/*when the select box is clicked, close any other select boxes,
		and open/close the current select box:*/
		e.stopPropagation();
		closeAllSelect(this);
		this.nextSibling.classList.toggle("select-hide");
		this.classList.toggle("select-arrow-active");
	);


function closeAllSelect(elmnt) 
	/*a function that will close all select boxes in the document,
	except the current select box:*/
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>

<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>

<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

Dominique Fortin, here is your previous script with the closeAllSelect function 'activated' (not comment)

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

edited Nov 22 '18 at 11:49

asked Nov 14 '18 at 19:13

Abdul

3610

This code works for me. I am not sure what the code outside of the doc.ready is supposed to be doing, but the #topic options change when the user selects a new value for #level

– Katie.Sun
Nov 14 '18 at 20:15

When I run it, the options of the topic dropdown dont change based on the qualification I pick.

– Abdul
Nov 14 '18 at 20:21

codepen.io/katiedotson/full/MzmWab

– Katie.Sun
Nov 14 '18 at 20:27

The unchange event will never trigger. Look at Setting selectedindex not triggering onchange event.

– Dominique Fortin
Nov 14 '18 at 22:27

The main thing is to add $(s).change(); after s.selectedIndex = i;. I think you should wrap the logic of this dropdown into an object for reusability.

– Dominique Fortin
Nov 15 '18 at 15:46

add a comment |

I have tried to use javascript/j-query to change options in the 2nd selection depending on the choice in the 1st selection.

I think the reason the javascript isn't working is because of other javascript that is used to style the dropdown.

If you have extra time, I would be grateful if you also show me how to link it to another dropdown called subjects (topic dropdown's choices depend on the subject and the qualification).

Finally, if you find a better solution that uses another language like php, I would accept that too.

Edit: A lot of people were stripping down the styling and the other js function.

The answers you give me are correct, but they won't work for me, probably because the problem lies in the other javascript function (the one that allows me to style the dropdown).

If you answer my question; it would be more helpful to include the problematic js function, since an answer that includes that will work for me.

Thanks

$(document).ready(function () 
 $("#level").change(function () 
 var val = $("#level").val();
 if (val === "GCSE") 
 $("#topic").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
 
		else if (val === "asLevel") 
 $("#topic").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
 
		else if (val === "aLevel") 
 $("#topic").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
 
 );
);

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) 
	selElmnt = x[i].getElementsByTagName("select")[0];
	/*for each element, create a new DIV that will act as the selected item:*/
	a = document.createElement("DIV");
	a.setAttribute("class", "select-selected");
	a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
	x[i].appendChild(a);
	/*for each element, create a new DIV that will contain the option list:*/
	b = document.createElement("DIV");
	b.setAttribute("class", "select-items select-hide");
	for (j = 0; j < selElmnt.length; j++) 
		/*for each option in the original select element,
		create a new DIV that will act as an option item:*/
		c = document.createElement("DIV");
		c.innerHTML = selElmnt.options[j].innerHTML;
		c.addEventListener("click", function(e) 
			/*when an item is clicked, update the original select box,
			and the selected item:*/
			var y, i, k, s, h;
			s = this.parentNode.parentNode.getElementsByTagName("select")[0];
			h = this.parentNode.previousSibling;
			for (i = 0; i < s.length; i++) 
				if (s.options[i].innerHTML == this.innerHTML) 
					s.selectedIndex = i;
					h.innerHTML = this.innerHTML;
					y = this.parentNode.getElementsByClassName("same-as-selected");
					for (k = 0; k < y.length; k++) 
						y[k].removeAttribute("class");
					
					this.setAttribute("class", "same-as-selected");
					break;
				
			
			h.click();
		);
		b.appendChild(c);
	
	x[i].appendChild(b);
	a.addEventListener("click", function(e) 
		/*when the select box is clicked, close any other select boxes,
		and open/close the current select box:*/
		e.stopPropagation();
		closeAllSelect(this);
		this.nextSibling.classList.toggle("select-hide");
		this.classList.toggle("select-arrow-active");
	);


function closeAllSelect(elmnt) 
	/*a function that will close all select boxes in the document,
	except the current select box:*/
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>

<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>

<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

Dominique Fortin, here is your previous script with the closeAllSelect function 'activated' (not comment)

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

edited Nov 22 '18 at 11:49

asked Nov 14 '18 at 19:13

Abdul

3610

I have tried to use javascript/j-query to change options in the 2nd selection depending on the choice in the 1st selection.

I think the reason the javascript isn't working is because of other javascript that is used to style the dropdown.

If you have extra time, I would be grateful if you also show me how to link it to another dropdown called subjects (topic dropdown's choices depend on the subject and the qualification).

Finally, if you find a better solution that uses another language like php, I would accept that too.

Edit: A lot of people were stripping down the styling and the other js function.

The answers you give me are correct, but they won't work for me, probably because the problem lies in the other javascript function (the one that allows me to style the dropdown).

If you answer my question; it would be more helpful to include the problematic js function, since an answer that includes that will work for me.

Thanks

$(document).ready(function () 
 $("#level").change(function () 
 var val = $("#level").val();
 if (val === "GCSE") 
 $("#topic").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
 
		else if (val === "asLevel") 
 $("#topic").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
 
		else if (val === "aLevel") 
 $("#topic").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
 
 );
);

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) 
	selElmnt = x[i].getElementsByTagName("select")[0];
	/*for each element, create a new DIV that will act as the selected item:*/
	a = document.createElement("DIV");
	a.setAttribute("class", "select-selected");
	a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
	x[i].appendChild(a);
	/*for each element, create a new DIV that will contain the option list:*/
	b = document.createElement("DIV");
	b.setAttribute("class", "select-items select-hide");
	for (j = 0; j < selElmnt.length; j++) 
		/*for each option in the original select element,
		create a new DIV that will act as an option item:*/
		c = document.createElement("DIV");
		c.innerHTML = selElmnt.options[j].innerHTML;
		c.addEventListener("click", function(e) 
			/*when an item is clicked, update the original select box,
			and the selected item:*/
			var y, i, k, s, h;
			s = this.parentNode.parentNode.getElementsByTagName("select")[0];
			h = this.parentNode.previousSibling;
			for (i = 0; i < s.length; i++) 
				if (s.options[i].innerHTML == this.innerHTML) 
					s.selectedIndex = i;
					h.innerHTML = this.innerHTML;
					y = this.parentNode.getElementsByClassName("same-as-selected");
					for (k = 0; k < y.length; k++) 
						y[k].removeAttribute("class");
					
					this.setAttribute("class", "same-as-selected");
					break;
				
			
			h.click();
		);
		b.appendChild(c);
	
	x[i].appendChild(b);
	a.addEventListener("click", function(e) 
		/*when the select box is clicked, close any other select boxes,
		and open/close the current select box:*/
		e.stopPropagation();
		closeAllSelect(this);
		this.nextSibling.classList.toggle("select-hide");
		this.classList.toggle("select-arrow-active");
	);


function closeAllSelect(elmnt) 
	/*a function that will close all select boxes in the document,
	except the current select box:*/
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>

<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>

<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

Dominique Fortin, here is your previous script with the closeAllSelect function 'activated' (not comment)

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

$(document).ready(function () 
 $("#level").change(function () 
 var val = $("#level").val();
 if (val === "GCSE") 
 $("#topic").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
 
		else if (val === "asLevel") 
 $("#topic").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
 
		else if (val === "aLevel") 
 $("#topic").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
 
 );
);

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) 
	selElmnt = x[i].getElementsByTagName("select")[0];
	/*for each element, create a new DIV that will act as the selected item:*/
	a = document.createElement("DIV");
	a.setAttribute("class", "select-selected");
	a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
	x[i].appendChild(a);
	/*for each element, create a new DIV that will contain the option list:*/
	b = document.createElement("DIV");
	b.setAttribute("class", "select-items select-hide");
	for (j = 0; j < selElmnt.length; j++) 
		/*for each option in the original select element,
		create a new DIV that will act as an option item:*/
		c = document.createElement("DIV");
		c.innerHTML = selElmnt.options[j].innerHTML;
		c.addEventListener("click", function(e) 
			/*when an item is clicked, update the original select box,
			and the selected item:*/
			var y, i, k, s, h;
			s = this.parentNode.parentNode.getElementsByTagName("select")[0];
			h = this.parentNode.previousSibling;
			for (i = 0; i < s.length; i++) 
				if (s.options[i].innerHTML == this.innerHTML) 
					s.selectedIndex = i;
					h.innerHTML = this.innerHTML;
					y = this.parentNode.getElementsByClassName("same-as-selected");
					for (k = 0; k < y.length; k++) 
						y[k].removeAttribute("class");
					
					this.setAttribute("class", "same-as-selected");
					break;
				
			
			h.click();
		);
		b.appendChild(c);
	
	x[i].appendChild(b);
	a.addEventListener("click", function(e) 
		/*when the select box is clicked, close any other select boxes,
		and open/close the current select box:*/
		e.stopPropagation();
		closeAllSelect(this);
		this.nextSibling.classList.toggle("select-hide");
		this.classList.toggle("select-arrow-active");
	);


function closeAllSelect(elmnt) 
	/*a function that will close all select boxes in the document,
	except the current select box:*/
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>

<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>

<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

$(document).ready(function () 
 $("#level").change(function () 
 var val = $("#level").val();
 if (val === "GCSE") 
 $("#topic").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
 
		else if (val === "asLevel") 
 $("#topic").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
 
		else if (val === "aLevel") 
 $("#topic").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
 
 );
);

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) 
	selElmnt = x[i].getElementsByTagName("select")[0];
	/*for each element, create a new DIV that will act as the selected item:*/
	a = document.createElement("DIV");
	a.setAttribute("class", "select-selected");
	a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
	x[i].appendChild(a);
	/*for each element, create a new DIV that will contain the option list:*/
	b = document.createElement("DIV");
	b.setAttribute("class", "select-items select-hide");
	for (j = 0; j < selElmnt.length; j++) 
		/*for each option in the original select element,
		create a new DIV that will act as an option item:*/
		c = document.createElement("DIV");
		c.innerHTML = selElmnt.options[j].innerHTML;
		c.addEventListener("click", function(e) 
			/*when an item is clicked, update the original select box,
			and the selected item:*/
			var y, i, k, s, h;
			s = this.parentNode.parentNode.getElementsByTagName("select")[0];
			h = this.parentNode.previousSibling;
			for (i = 0; i < s.length; i++) 
				if (s.options[i].innerHTML == this.innerHTML) 
					s.selectedIndex = i;
					h.innerHTML = this.innerHTML;
					y = this.parentNode.getElementsByClassName("same-as-selected");
					for (k = 0; k < y.length; k++) 
						y[k].removeAttribute("class");
					
					this.setAttribute("class", "same-as-selected");
					break;
				
			
			h.click();
		);
		b.appendChild(c);
	
	x[i].appendChild(b);
	a.addEventListener("click", function(e) 
		/*when the select box is clicked, close any other select boxes,
		and open/close the current select box:*/
		e.stopPropagation();
		closeAllSelect(this);
		this.nextSibling.classList.toggle("select-hide");
		this.classList.toggle("select-arrow-active");
	);


function closeAllSelect(elmnt) 
	/*a function that will close all select boxes in the document,
	except the current select box:*/
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>

<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>

<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

javascript jquery html css

edited Nov 22 '18 at 11:49

asked Nov 14 '18 at 19:13

Abdul

3610

edited Nov 22 '18 at 11:49

asked Nov 14 '18 at 19:13

Abdul

3610

edited Nov 22 '18 at 11:49

asked Nov 14 '18 at 19:13

Abdul

3610

asked Nov 14 '18 at 19:13

Abdul

3610

asked Nov 14 '18 at 19:13

Abdul

3610

This code works for me. I am not sure what the code outside of the doc.ready is supposed to be doing, but the #topic options change when the user selects a new value for #level

– Katie.Sun
Nov 14 '18 at 20:15

When I run it, the options of the topic dropdown dont change based on the qualification I pick.

– Abdul
Nov 14 '18 at 20:21

codepen.io/katiedotson/full/MzmWab

– Katie.Sun
Nov 14 '18 at 20:27

The unchange event will never trigger. Look at Setting selectedindex not triggering onchange event.

– Dominique Fortin
Nov 14 '18 at 22:27

The main thing is to add $(s).change(); after s.selectedIndex = i;. I think you should wrap the logic of this dropdown into an object for reusability.

– Dominique Fortin
Nov 15 '18 at 15:46

add a comment |

This code works for me. I am not sure what the code outside of the doc.ready is supposed to be doing, but the #topic options change when the user selects a new value for #level

– Katie.Sun
Nov 14 '18 at 20:15

When I run it, the options of the topic dropdown dont change based on the qualification I pick.

– Abdul
Nov 14 '18 at 20:21

codepen.io/katiedotson/full/MzmWab

– Katie.Sun
Nov 14 '18 at 20:27

The unchange event will never trigger. Look at Setting selectedindex not triggering onchange event.

– Dominique Fortin
Nov 14 '18 at 22:27

The main thing is to add $(s).change(); after s.selectedIndex = i;. I think you should wrap the logic of this dropdown into an object for reusability.

– Dominique Fortin
Nov 15 '18 at 15:46

This code works for me. I am not sure what the code outside of the doc.ready is supposed to be doing, but the #topic options change when the user selects a new value for #level

– Katie.Sun
Nov 14 '18 at 20:15

When I run it, the options of the topic dropdown dont change based on the qualification I pick.

– Abdul
Nov 14 '18 at 20:21

codepen.io/katiedotson/full/MzmWab

– Katie.Sun
Nov 14 '18 at 20:27

The unchange event will never trigger. Look at Setting selectedindex not triggering onchange event.

– Dominique Fortin
Nov 14 '18 at 22:27

The main thing is to add $(s).change(); after s.selectedIndex = i;. I think you should wrap the logic of this dropdown into an object for reusability.

– Dominique Fortin
Nov 15 '18 at 15:46

add a comment |

3 Answers
3

active

oldest

votes

This is what meant by wrapring the logic into an object.

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) 

global.myNameSpace = global.myNameSpace )(window);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="subject">
	<option value="0">Select a subject</option>
	<option value="biology">Biology</option>
	<option value="chemistry">Chemistry</option>
	<option value="physics">Physics</option>
	<option value="math">Maths</option>
	<option value="english">English</option>
	<option value="art">Art</option>
	<option value="re">RE</option>
	<option value="computing">Computing</option>
</select>

<select id="level">
	<option value="0">Select the qualification</option>
	<option value="GCSE">GCSE</option>
	<option value="asLevel">AS Level</option>
	<option value="aLevel">A Level</option>
</select>

<select id="topic">
	<option value="0">Select the topic</option>
</select>

edited Nov 21 '18 at 3:27

answered Nov 15 '18 at 2:04

Dominique Fortin

1,648816

thanks, is there a way to keep the function that closes the dropdown when clicking outside of it.

– Abdul
Nov 20 '18 at 10:18

1

@Abdul The dropdown are closing now when you click outside of it.

– Dominique Fortin
Nov 21 '18 at 3:29

On your old answer, you made the closeAllSelect function become a comment, I removed the comment syntax and then the function worked. Was there a reason why you cancelled/removed the funtion? I will add your previous code to my question.

– Abdul
Nov 22 '18 at 11:44

Your new edits make the dropdown refuse to close when clicking the title bar (blue part). Your old answer worked I think. Also, if you have extra time, do you know how to link the 3rd dropdown to the 1st one too (e.g. biology topics are different to chemistry topics). Thanks

– Abdul
Nov 22 '18 at 11:52

never mind I figured out how to link the 3rd dropdown to the 1st one. I will post it as my answer when I finish writing it. Thanks for the help.

– Abdul
Nov 22 '18 at 12:13

add a comment |

Here is how I would do it. I'd put the objects into a separate .js file and call it with the tag. I stripped out your styling and half of your options just to keep my answer concise, but the principle is scalable.

Store each set of possibilities as an array and use an event listener to empty out and then refill your dropdowns each time the previous dropdown has been selected.

var levelOpts = 
	"1": [
		["1","Bio specific option #1"],["2","Bio specific option #2"],["3","Bio specific option #3"]
	],
	"2": [
		["4","Chem specific option #1"],["5","Chem specific option #2"],["6","Chem specific option #3"]
	],
 "3": [
		["7","Phys specific option #1"],["8","Phys specific option #2"],["9","Phys specific option #3"]
	],
	"4": [
		["10","Math specific option #1"],["11","Math specific option #2"],["12","Math specific option #3"]
	]
;
var topicOpts = 
	"1": [
		["0","Choose one"],["1","Bio specific suboption #1a"],["2","Bio specific suboption #1b"],["3","Bio specific suboption #1c"]
	],
	"2": [
		["0","Choose one"],["1","Bio specific suboption #2a"],["2","Bio specific suboption #2b"],["3","Bio specific suboption #2c"]
	],
 "3": [
		["0","Choose one"],["1","Bio specific suboption #3a"],["2","Bio specific suboption #3b"],["3","Bio specific suboption #3c"]
	],
	"4": [
		["0","Choose one"],["1","Chem specific suboption #1a"],["2","Chem specific suboption #1b"],["3","Chem specific suboption #1c"]
	],
	"5": [
		["0","Choose one"],["1","Chem specific suboption #2a"],["2","Chem specific suboption #2b"],["3","Chem specific suboption #2c"]
	],
 "6": [
		["0","Choose one"],["1","Chem specific suboption #3a"],["2","Chem specific suboption #3b"],["3","Chem specific suboption #3c"]
	],
 "7": [
		["0","Choose one"],["1","Phys specific suboption #1a"],["2","Phys specific suboption #1b"],["3","Phys specific suboption #1c"]
	],
	"8": [
		["0","Choose one"],["1","Phys specific suboption #2a"],["2","Phys specific suboption #2b"],["3","Phys specific suboption #2c"]
	],
 "9": [
		["0","Choose one"],["1","Phys specific suboption #3a"],["2","Phys specific suboption #3b"],["3","Phys specific suboption #3c"]
	],
	"10": [
		["0","Choose one"],["1","Math specific suboption #1a"],["2","Math specific suboption #1b"],["3","Math specific suboption #1c"]
	],
	"11": [
		["0","Choose one"],["1","Math specific suboption #2a"],["2","Math specific suboption #2b"],["3","Math specific suboption #2c"]
	],
 "12": [
		["0","Choose one"],["1","Math specific suboption #3a"],["2","Math specific suboption #3b"],["3","Math specific suboption #3c"]
	],
;
var subject = document.getElementById("subject");
var level = document.getElementById("level");
var topic = document.getElementById("topic");
subject.addEventListener("change", LevelFill);
level.addEventListener("change", TopicFill);
function LevelFill() 
	var opts = ;
 while (level.firstChild) 
 	level.firstChild.remove();
 
 switch(subject.value) 
 	case "1":
 	opts = levelOpts["1"];
			level.style.display = "block";
 break;
 case "2":
 	opts = levelOpts["2"];
			level.style.display = "block";
			break;
		case "3":
			opts = levelOpts["3"];
			level.style.display = "block";
			break;
		case "4":
			opts = levelOpts["4"];
			level.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		level.appendChild(option);
	
	topic.style.display = "none";

function TopicFill() 
	var opts = ;
	while (topic.firstChild) 
		topic.firstChild.remove();
	
	switch(level.value) 
		case "1":
			opts = topicOpts["1"];
			topic.style.display = "block";
			break;
		case "2":
			opts = topicOpts["2"];
			topic.style.display = "block";
			break;
		case "3":
			opts = topicOpts["3"];
			topic.style.display = "block";
			break;
 case "4":
			opts = topicOpts["4"];
			topic.style.display = "block";
			break;
		case "5":
			opts = topicOpts["5"];
			topic.style.display = "block";
			break;
		case "6":
			opts = topicOpts["6"];
			topic.style.display = "block";
			break;
 case "7":
			opts = topicOpts["7"];
			topic.style.display = "block";
			break;
		case "8":
			opts = topicOpts["8"];
			topic.style.display = "block";
			break;
		case "9":
			opts = topicOpts["9"];
			topic.style.display = "block";
			break;
 case "10":
			opts = topicOpts["10"];
			topic.style.display = "block";
			break;
		case "11":
			opts = topicOpts["11"];
			topic.style.display = "block";
			break;
		case "12":
			opts = topicOpts["12"];
			topic.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
			topic.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		topic.appendChild(option);
	
	topic.style.display = "block";

#level, #topic 
 display: none

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="1">Biology</option>
			<option value="2">Chemistry</option>
			<option value="3">Physics</option>
			<option value="4">Maths</option>
		</select>
	</div>
</div>
<div class="border">
 <div class="custom-select">
 <select id="level"></select>
 </div>
</div>
<div class="border">
 <div class="custom-select">
	 <select id="topic"></select>
 </div>
</div>

answered Nov 15 '18 at 2:57

ecg8

8821515

I like your solution and I tried to use it, but it isn't working for me. I believe that my problem might be that the styling and/or the other scripts are interfering with your solution. If you find out why, I would be grateful. Thanks for the help though :)

– Abdul
Nov 15 '18 at 15:20

@ecg8 The main problem with this code is a lack of reusability. In a normal application, you'd do an ajax call to get the list of topic with the level as parameter then you'd refill the dropdown with the answer. Or if the list of topic never changed, you'd have a structure like "GSCE":[value:"val1", ..., ...], "asLeve": ... and you'd fetch the list then called a fill function with it. But, you wouldn't have two fill function.

– Dominique Fortin
Nov 15 '18 at 15:59

add a comment |

I figured out how to fix my problem. I used @Dominique Fortin's answer and edited it a little to factor in the selection of the first dropdown (subject). Everything else the same as Dominique's answer except the closeAllSelect function, the one in this solution works better than Dominique's current one because it still allows you to close the dropdown by clicking the blue title bar. It also allows you to open more than one dropwdown at the same time.

Here is the code:

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () );
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.1em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;


.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

I found a logical problem with this solution, if I select the qualification before the subject, the topics displayed will not update until I reselect the qualification. If anyone can point out the problem and/or give tips to make it more efficient, that would be helpful.

Thanks.

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 12:26

Abdul

3610

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307251%2fhow-to-change-options-in-a-selection-based-on-the-chosen-option-in-another-selec%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

This is what meant by wrapring the logic into an object.

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) 

global.myNameSpace = global.myNameSpace )(window);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="subject">
	<option value="0">Select a subject</option>
	<option value="biology">Biology</option>
	<option value="chemistry">Chemistry</option>
	<option value="physics">Physics</option>
	<option value="math">Maths</option>
	<option value="english">English</option>
	<option value="art">Art</option>
	<option value="re">RE</option>
	<option value="computing">Computing</option>
</select>

<select id="level">
	<option value="0">Select the qualification</option>
	<option value="GCSE">GCSE</option>
	<option value="asLevel">AS Level</option>
	<option value="aLevel">A Level</option>
</select>

<select id="topic">
	<option value="0">Select the topic</option>
</select>

edited Nov 21 '18 at 3:27

answered Nov 15 '18 at 2:04

Dominique Fortin

1,648816

thanks, is there a way to keep the function that closes the dropdown when clicking outside of it.

– Abdul
Nov 20 '18 at 10:18

1

@Abdul The dropdown are closing now when you click outside of it.

– Dominique Fortin
Nov 21 '18 at 3:29

On your old answer, you made the closeAllSelect function become a comment, I removed the comment syntax and then the function worked. Was there a reason why you cancelled/removed the funtion? I will add your previous code to my question.

– Abdul
Nov 22 '18 at 11:44

Your new edits make the dropdown refuse to close when clicking the title bar (blue part). Your old answer worked I think. Also, if you have extra time, do you know how to link the 3rd dropdown to the 1st one too (e.g. biology topics are different to chemistry topics). Thanks

– Abdul
Nov 22 '18 at 11:52

never mind I figured out how to link the 3rd dropdown to the 1st one. I will post it as my answer when I finish writing it. Thanks for the help.

– Abdul
Nov 22 '18 at 12:13

add a comment |

This is what meant by wrapring the logic into an object.

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) 

global.myNameSpace = global.myNameSpace )(window);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="subject">
	<option value="0">Select a subject</option>
	<option value="biology">Biology</option>
	<option value="chemistry">Chemistry</option>
	<option value="physics">Physics</option>
	<option value="math">Maths</option>
	<option value="english">English</option>
	<option value="art">Art</option>
	<option value="re">RE</option>
	<option value="computing">Computing</option>
</select>

<select id="level">
	<option value="0">Select the qualification</option>
	<option value="GCSE">GCSE</option>
	<option value="asLevel">AS Level</option>
	<option value="aLevel">A Level</option>
</select>

<select id="topic">
	<option value="0">Select the topic</option>
</select>

edited Nov 21 '18 at 3:27

answered Nov 15 '18 at 2:04

Dominique Fortin

1,648816

thanks, is there a way to keep the function that closes the dropdown when clicking outside of it.

– Abdul
Nov 20 '18 at 10:18

1

@Abdul The dropdown are closing now when you click outside of it.

– Dominique Fortin
Nov 21 '18 at 3:29

On your old answer, you made the closeAllSelect function become a comment, I removed the comment syntax and then the function worked. Was there a reason why you cancelled/removed the funtion? I will add your previous code to my question.

– Abdul
Nov 22 '18 at 11:44

Your new edits make the dropdown refuse to close when clicking the title bar (blue part). Your old answer worked I think. Also, if you have extra time, do you know how to link the 3rd dropdown to the 1st one too (e.g. biology topics are different to chemistry topics). Thanks

– Abdul
Nov 22 '18 at 11:52

never mind I figured out how to link the 3rd dropdown to the 1st one. I will post it as my answer when I finish writing it. Thanks for the help.

– Abdul
Nov 22 '18 at 12:13

add a comment |

This is what meant by wrapring the logic into an object.

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) 

global.myNameSpace = global.myNameSpace )(window);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="subject">
	<option value="0">Select a subject</option>
	<option value="biology">Biology</option>
	<option value="chemistry">Chemistry</option>
	<option value="physics">Physics</option>
	<option value="math">Maths</option>
	<option value="english">English</option>
	<option value="art">Art</option>
	<option value="re">RE</option>
	<option value="computing">Computing</option>
</select>

<select id="level">
	<option value="0">Select the qualification</option>
	<option value="GCSE">GCSE</option>
	<option value="asLevel">AS Level</option>
	<option value="aLevel">A Level</option>
</select>

<select id="topic">
	<option value="0">Select the topic</option>
</select>

edited Nov 21 '18 at 3:27

answered Nov 15 '18 at 2:04

Dominique Fortin

1,648816

This is what meant by wrapring the logic into an object.

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) 

global.myNameSpace = global.myNameSpace )(window);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="subject">
	<option value="0">Select a subject</option>
	<option value="biology">Biology</option>
	<option value="chemistry">Chemistry</option>
	<option value="physics">Physics</option>
	<option value="math">Maths</option>
	<option value="english">English</option>
	<option value="art">Art</option>
	<option value="re">RE</option>
	<option value="computing">Computing</option>
</select>

<select id="level">
	<option value="0">Select the qualification</option>
	<option value="GCSE">GCSE</option>
	<option value="asLevel">AS Level</option>
	<option value="aLevel">A Level</option>
</select>

<select id="topic">
	<option value="0">Select the topic</option>
</select>

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) 

global.myNameSpace = global.myNameSpace )(window);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="subject">
	<option value="0">Select a subject</option>
	<option value="biology">Biology</option>
	<option value="chemistry">Chemistry</option>
	<option value="physics">Physics</option>
	<option value="math">Maths</option>
	<option value="english">English</option>
	<option value="art">Art</option>
	<option value="re">RE</option>
	<option value="computing">Computing</option>
</select>

<select id="level">
	<option value="0">Select the qualification</option>
	<option value="GCSE">GCSE</option>
	<option value="asLevel">AS Level</option>
	<option value="aLevel">A Level</option>
</select>

<select id="topic">
	<option value="0">Select the topic</option>
</select>

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () 

		var val = $("#level").val();

		if (val === "GCSE") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item1: test 1"
			 ,"value":"test2","label":"item1: test 2"]);
		 else if (val === "asLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item2: test 1"
			 ,"value":"test2","label":"item2: test 2"]);
		 else if (val === "aLevel") 

			myTopic.changeList(["value":"0", "label":"Select the topic"
			 ,"value":"test", "label":"item3: test 1"
			 ,"value":"test2","label":"item3: test 2"]);
		
	);
 
);


(function module (global) 

global.myNameSpace = global.myNameSpace )(window);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;

.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.border 
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	width: auto;
	border-radius: 13px;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	padding: 3px;
	margin-bottom: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="subject">
	<option value="0">Select a subject</option>
	<option value="biology">Biology</option>
	<option value="chemistry">Chemistry</option>
	<option value="physics">Physics</option>
	<option value="math">Maths</option>
	<option value="english">English</option>
	<option value="art">Art</option>
	<option value="re">RE</option>
	<option value="computing">Computing</option>
</select>

<select id="level">
	<option value="0">Select the qualification</option>
	<option value="GCSE">GCSE</option>
	<option value="asLevel">AS Level</option>
	<option value="aLevel">A Level</option>
</select>

<select id="topic">
	<option value="0">Select the topic</option>
</select>

edited Nov 21 '18 at 3:27

answered Nov 15 '18 at 2:04

Dominique Fortin

1,648816

edited Nov 21 '18 at 3:27

answered Nov 15 '18 at 2:04

Dominique Fortin

1,648816

answered Nov 15 '18 at 2:04

Dominique Fortin

1,648816

answered Nov 15 '18 at 2:04

Dominique Fortin

1,648816

thanks, is there a way to keep the function that closes the dropdown when clicking outside of it.

– Abdul
Nov 20 '18 at 10:18

1

@Abdul The dropdown are closing now when you click outside of it.

– Dominique Fortin
Nov 21 '18 at 3:29

On your old answer, you made the closeAllSelect function become a comment, I removed the comment syntax and then the function worked. Was there a reason why you cancelled/removed the funtion? I will add your previous code to my question.

– Abdul
Nov 22 '18 at 11:44

Your new edits make the dropdown refuse to close when clicking the title bar (blue part). Your old answer worked I think. Also, if you have extra time, do you know how to link the 3rd dropdown to the 1st one too (e.g. biology topics are different to chemistry topics). Thanks

– Abdul
Nov 22 '18 at 11:52

never mind I figured out how to link the 3rd dropdown to the 1st one. I will post it as my answer when I finish writing it. Thanks for the help.

– Abdul
Nov 22 '18 at 12:13

add a comment |

thanks, is there a way to keep the function that closes the dropdown when clicking outside of it.

– Abdul
Nov 20 '18 at 10:18

1

@Abdul The dropdown are closing now when you click outside of it.

– Dominique Fortin
Nov 21 '18 at 3:29

On your old answer, you made the closeAllSelect function become a comment, I removed the comment syntax and then the function worked. Was there a reason why you cancelled/removed the funtion? I will add your previous code to my question.

– Abdul
Nov 22 '18 at 11:44

Your new edits make the dropdown refuse to close when clicking the title bar (blue part). Your old answer worked I think. Also, if you have extra time, do you know how to link the 3rd dropdown to the 1st one too (e.g. biology topics are different to chemistry topics). Thanks

– Abdul
Nov 22 '18 at 11:52

never mind I figured out how to link the 3rd dropdown to the 1st one. I will post it as my answer when I finish writing it. Thanks for the help.

– Abdul
Nov 22 '18 at 12:13

thanks, is there a way to keep the function that closes the dropdown when clicking outside of it.

– Abdul
Nov 20 '18 at 10:18

@Abdul The dropdown are closing now when you click outside of it.

– Dominique Fortin
Nov 21 '18 at 3:29

On your old answer, you made the closeAllSelect function become a comment, I removed the comment syntax and then the function worked. Was there a reason why you cancelled/removed the funtion? I will add your previous code to my question.

– Abdul
Nov 22 '18 at 11:44

Your new edits make the dropdown refuse to close when clicking the title bar (blue part). Your old answer worked I think. Also, if you have extra time, do you know how to link the 3rd dropdown to the 1st one too (e.g. biology topics are different to chemistry topics). Thanks

– Abdul
Nov 22 '18 at 11:52

never mind I figured out how to link the 3rd dropdown to the 1st one. I will post it as my answer when I finish writing it. Thanks for the help.

– Abdul
Nov 22 '18 at 12:13

add a comment |

Store each set of possibilities as an array and use an event listener to empty out and then refill your dropdowns each time the previous dropdown has been selected.

var levelOpts = 
	"1": [
		["1","Bio specific option #1"],["2","Bio specific option #2"],["3","Bio specific option #3"]
	],
	"2": [
		["4","Chem specific option #1"],["5","Chem specific option #2"],["6","Chem specific option #3"]
	],
 "3": [
		["7","Phys specific option #1"],["8","Phys specific option #2"],["9","Phys specific option #3"]
	],
	"4": [
		["10","Math specific option #1"],["11","Math specific option #2"],["12","Math specific option #3"]
	]
;
var topicOpts = 
	"1": [
		["0","Choose one"],["1","Bio specific suboption #1a"],["2","Bio specific suboption #1b"],["3","Bio specific suboption #1c"]
	],
	"2": [
		["0","Choose one"],["1","Bio specific suboption #2a"],["2","Bio specific suboption #2b"],["3","Bio specific suboption #2c"]
	],
 "3": [
		["0","Choose one"],["1","Bio specific suboption #3a"],["2","Bio specific suboption #3b"],["3","Bio specific suboption #3c"]
	],
	"4": [
		["0","Choose one"],["1","Chem specific suboption #1a"],["2","Chem specific suboption #1b"],["3","Chem specific suboption #1c"]
	],
	"5": [
		["0","Choose one"],["1","Chem specific suboption #2a"],["2","Chem specific suboption #2b"],["3","Chem specific suboption #2c"]
	],
 "6": [
		["0","Choose one"],["1","Chem specific suboption #3a"],["2","Chem specific suboption #3b"],["3","Chem specific suboption #3c"]
	],
 "7": [
		["0","Choose one"],["1","Phys specific suboption #1a"],["2","Phys specific suboption #1b"],["3","Phys specific suboption #1c"]
	],
	"8": [
		["0","Choose one"],["1","Phys specific suboption #2a"],["2","Phys specific suboption #2b"],["3","Phys specific suboption #2c"]
	],
 "9": [
		["0","Choose one"],["1","Phys specific suboption #3a"],["2","Phys specific suboption #3b"],["3","Phys specific suboption #3c"]
	],
	"10": [
		["0","Choose one"],["1","Math specific suboption #1a"],["2","Math specific suboption #1b"],["3","Math specific suboption #1c"]
	],
	"11": [
		["0","Choose one"],["1","Math specific suboption #2a"],["2","Math specific suboption #2b"],["3","Math specific suboption #2c"]
	],
 "12": [
		["0","Choose one"],["1","Math specific suboption #3a"],["2","Math specific suboption #3b"],["3","Math specific suboption #3c"]
	],
;
var subject = document.getElementById("subject");
var level = document.getElementById("level");
var topic = document.getElementById("topic");
subject.addEventListener("change", LevelFill);
level.addEventListener("change", TopicFill);
function LevelFill() 
	var opts = ;
 while (level.firstChild) 
 	level.firstChild.remove();
 
 switch(subject.value) 
 	case "1":
 	opts = levelOpts["1"];
			level.style.display = "block";
 break;
 case "2":
 	opts = levelOpts["2"];
			level.style.display = "block";
			break;
		case "3":
			opts = levelOpts["3"];
			level.style.display = "block";
			break;
		case "4":
			opts = levelOpts["4"];
			level.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		level.appendChild(option);
	
	topic.style.display = "none";

function TopicFill() 
	var opts = ;
	while (topic.firstChild) 
		topic.firstChild.remove();
	
	switch(level.value) 
		case "1":
			opts = topicOpts["1"];
			topic.style.display = "block";
			break;
		case "2":
			opts = topicOpts["2"];
			topic.style.display = "block";
			break;
		case "3":
			opts = topicOpts["3"];
			topic.style.display = "block";
			break;
 case "4":
			opts = topicOpts["4"];
			topic.style.display = "block";
			break;
		case "5":
			opts = topicOpts["5"];
			topic.style.display = "block";
			break;
		case "6":
			opts = topicOpts["6"];
			topic.style.display = "block";
			break;
 case "7":
			opts = topicOpts["7"];
			topic.style.display = "block";
			break;
		case "8":
			opts = topicOpts["8"];
			topic.style.display = "block";
			break;
		case "9":
			opts = topicOpts["9"];
			topic.style.display = "block";
			break;
 case "10":
			opts = topicOpts["10"];
			topic.style.display = "block";
			break;
		case "11":
			opts = topicOpts["11"];
			topic.style.display = "block";
			break;
		case "12":
			opts = topicOpts["12"];
			topic.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
			topic.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		topic.appendChild(option);
	
	topic.style.display = "block";

#level, #topic 
 display: none

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="1">Biology</option>
			<option value="2">Chemistry</option>
			<option value="3">Physics</option>
			<option value="4">Maths</option>
		</select>
	</div>
</div>
<div class="border">
 <div class="custom-select">
 <select id="level"></select>
 </div>
</div>
<div class="border">
 <div class="custom-select">
	 <select id="topic"></select>
 </div>
</div>

answered Nov 15 '18 at 2:57

ecg8

8821515

I like your solution and I tried to use it, but it isn't working for me. I believe that my problem might be that the styling and/or the other scripts are interfering with your solution. If you find out why, I would be grateful. Thanks for the help though :)

– Abdul
Nov 15 '18 at 15:20

@ecg8 The main problem with this code is a lack of reusability. In a normal application, you'd do an ajax call to get the list of topic with the level as parameter then you'd refill the dropdown with the answer. Or if the list of topic never changed, you'd have a structure like "GSCE":[value:"val1", ..., ...], "asLeve": ... and you'd fetch the list then called a fill function with it. But, you wouldn't have two fill function.

– Dominique Fortin
Nov 15 '18 at 15:59

add a comment |

Store each set of possibilities as an array and use an event listener to empty out and then refill your dropdowns each time the previous dropdown has been selected.

var levelOpts = 
	"1": [
		["1","Bio specific option #1"],["2","Bio specific option #2"],["3","Bio specific option #3"]
	],
	"2": [
		["4","Chem specific option #1"],["5","Chem specific option #2"],["6","Chem specific option #3"]
	],
 "3": [
		["7","Phys specific option #1"],["8","Phys specific option #2"],["9","Phys specific option #3"]
	],
	"4": [
		["10","Math specific option #1"],["11","Math specific option #2"],["12","Math specific option #3"]
	]
;
var topicOpts = 
	"1": [
		["0","Choose one"],["1","Bio specific suboption #1a"],["2","Bio specific suboption #1b"],["3","Bio specific suboption #1c"]
	],
	"2": [
		["0","Choose one"],["1","Bio specific suboption #2a"],["2","Bio specific suboption #2b"],["3","Bio specific suboption #2c"]
	],
 "3": [
		["0","Choose one"],["1","Bio specific suboption #3a"],["2","Bio specific suboption #3b"],["3","Bio specific suboption #3c"]
	],
	"4": [
		["0","Choose one"],["1","Chem specific suboption #1a"],["2","Chem specific suboption #1b"],["3","Chem specific suboption #1c"]
	],
	"5": [
		["0","Choose one"],["1","Chem specific suboption #2a"],["2","Chem specific suboption #2b"],["3","Chem specific suboption #2c"]
	],
 "6": [
		["0","Choose one"],["1","Chem specific suboption #3a"],["2","Chem specific suboption #3b"],["3","Chem specific suboption #3c"]
	],
 "7": [
		["0","Choose one"],["1","Phys specific suboption #1a"],["2","Phys specific suboption #1b"],["3","Phys specific suboption #1c"]
	],
	"8": [
		["0","Choose one"],["1","Phys specific suboption #2a"],["2","Phys specific suboption #2b"],["3","Phys specific suboption #2c"]
	],
 "9": [
		["0","Choose one"],["1","Phys specific suboption #3a"],["2","Phys specific suboption #3b"],["3","Phys specific suboption #3c"]
	],
	"10": [
		["0","Choose one"],["1","Math specific suboption #1a"],["2","Math specific suboption #1b"],["3","Math specific suboption #1c"]
	],
	"11": [
		["0","Choose one"],["1","Math specific suboption #2a"],["2","Math specific suboption #2b"],["3","Math specific suboption #2c"]
	],
 "12": [
		["0","Choose one"],["1","Math specific suboption #3a"],["2","Math specific suboption #3b"],["3","Math specific suboption #3c"]
	],
;
var subject = document.getElementById("subject");
var level = document.getElementById("level");
var topic = document.getElementById("topic");
subject.addEventListener("change", LevelFill);
level.addEventListener("change", TopicFill);
function LevelFill() 
	var opts = ;
 while (level.firstChild) 
 	level.firstChild.remove();
 
 switch(subject.value) 
 	case "1":
 	opts = levelOpts["1"];
			level.style.display = "block";
 break;
 case "2":
 	opts = levelOpts["2"];
			level.style.display = "block";
			break;
		case "3":
			opts = levelOpts["3"];
			level.style.display = "block";
			break;
		case "4":
			opts = levelOpts["4"];
			level.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		level.appendChild(option);
	
	topic.style.display = "none";

function TopicFill() 
	var opts = ;
	while (topic.firstChild) 
		topic.firstChild.remove();
	
	switch(level.value) 
		case "1":
			opts = topicOpts["1"];
			topic.style.display = "block";
			break;
		case "2":
			opts = topicOpts["2"];
			topic.style.display = "block";
			break;
		case "3":
			opts = topicOpts["3"];
			topic.style.display = "block";
			break;
 case "4":
			opts = topicOpts["4"];
			topic.style.display = "block";
			break;
		case "5":
			opts = topicOpts["5"];
			topic.style.display = "block";
			break;
		case "6":
			opts = topicOpts["6"];
			topic.style.display = "block";
			break;
 case "7":
			opts = topicOpts["7"];
			topic.style.display = "block";
			break;
		case "8":
			opts = topicOpts["8"];
			topic.style.display = "block";
			break;
		case "9":
			opts = topicOpts["9"];
			topic.style.display = "block";
			break;
 case "10":
			opts = topicOpts["10"];
			topic.style.display = "block";
			break;
		case "11":
			opts = topicOpts["11"];
			topic.style.display = "block";
			break;
		case "12":
			opts = topicOpts["12"];
			topic.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
			topic.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		topic.appendChild(option);
	
	topic.style.display = "block";

#level, #topic 
 display: none

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="1">Biology</option>
			<option value="2">Chemistry</option>
			<option value="3">Physics</option>
			<option value="4">Maths</option>
		</select>
	</div>
</div>
<div class="border">
 <div class="custom-select">
 <select id="level"></select>
 </div>
</div>
<div class="border">
 <div class="custom-select">
	 <select id="topic"></select>
 </div>
</div>

answered Nov 15 '18 at 2:57

ecg8

8821515

I like your solution and I tried to use it, but it isn't working for me. I believe that my problem might be that the styling and/or the other scripts are interfering with your solution. If you find out why, I would be grateful. Thanks for the help though :)

– Abdul
Nov 15 '18 at 15:20

@ecg8 The main problem with this code is a lack of reusability. In a normal application, you'd do an ajax call to get the list of topic with the level as parameter then you'd refill the dropdown with the answer. Or if the list of topic never changed, you'd have a structure like "GSCE":[value:"val1", ..., ...], "asLeve": ... and you'd fetch the list then called a fill function with it. But, you wouldn't have two fill function.

– Dominique Fortin
Nov 15 '18 at 15:59

add a comment |

Store each set of possibilities as an array and use an event listener to empty out and then refill your dropdowns each time the previous dropdown has been selected.

var levelOpts = 
	"1": [
		["1","Bio specific option #1"],["2","Bio specific option #2"],["3","Bio specific option #3"]
	],
	"2": [
		["4","Chem specific option #1"],["5","Chem specific option #2"],["6","Chem specific option #3"]
	],
 "3": [
		["7","Phys specific option #1"],["8","Phys specific option #2"],["9","Phys specific option #3"]
	],
	"4": [
		["10","Math specific option #1"],["11","Math specific option #2"],["12","Math specific option #3"]
	]
;
var topicOpts = 
	"1": [
		["0","Choose one"],["1","Bio specific suboption #1a"],["2","Bio specific suboption #1b"],["3","Bio specific suboption #1c"]
	],
	"2": [
		["0","Choose one"],["1","Bio specific suboption #2a"],["2","Bio specific suboption #2b"],["3","Bio specific suboption #2c"]
	],
 "3": [
		["0","Choose one"],["1","Bio specific suboption #3a"],["2","Bio specific suboption #3b"],["3","Bio specific suboption #3c"]
	],
	"4": [
		["0","Choose one"],["1","Chem specific suboption #1a"],["2","Chem specific suboption #1b"],["3","Chem specific suboption #1c"]
	],
	"5": [
		["0","Choose one"],["1","Chem specific suboption #2a"],["2","Chem specific suboption #2b"],["3","Chem specific suboption #2c"]
	],
 "6": [
		["0","Choose one"],["1","Chem specific suboption #3a"],["2","Chem specific suboption #3b"],["3","Chem specific suboption #3c"]
	],
 "7": [
		["0","Choose one"],["1","Phys specific suboption #1a"],["2","Phys specific suboption #1b"],["3","Phys specific suboption #1c"]
	],
	"8": [
		["0","Choose one"],["1","Phys specific suboption #2a"],["2","Phys specific suboption #2b"],["3","Phys specific suboption #2c"]
	],
 "9": [
		["0","Choose one"],["1","Phys specific suboption #3a"],["2","Phys specific suboption #3b"],["3","Phys specific suboption #3c"]
	],
	"10": [
		["0","Choose one"],["1","Math specific suboption #1a"],["2","Math specific suboption #1b"],["3","Math specific suboption #1c"]
	],
	"11": [
		["0","Choose one"],["1","Math specific suboption #2a"],["2","Math specific suboption #2b"],["3","Math specific suboption #2c"]
	],
 "12": [
		["0","Choose one"],["1","Math specific suboption #3a"],["2","Math specific suboption #3b"],["3","Math specific suboption #3c"]
	],
;
var subject = document.getElementById("subject");
var level = document.getElementById("level");
var topic = document.getElementById("topic");
subject.addEventListener("change", LevelFill);
level.addEventListener("change", TopicFill);
function LevelFill() 
	var opts = ;
 while (level.firstChild) 
 	level.firstChild.remove();
 
 switch(subject.value) 
 	case "1":
 	opts = levelOpts["1"];
			level.style.display = "block";
 break;
 case "2":
 	opts = levelOpts["2"];
			level.style.display = "block";
			break;
		case "3":
			opts = levelOpts["3"];
			level.style.display = "block";
			break;
		case "4":
			opts = levelOpts["4"];
			level.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		level.appendChild(option);
	
	topic.style.display = "none";

function TopicFill() 
	var opts = ;
	while (topic.firstChild) 
		topic.firstChild.remove();
	
	switch(level.value) 
		case "1":
			opts = topicOpts["1"];
			topic.style.display = "block";
			break;
		case "2":
			opts = topicOpts["2"];
			topic.style.display = "block";
			break;
		case "3":
			opts = topicOpts["3"];
			topic.style.display = "block";
			break;
 case "4":
			opts = topicOpts["4"];
			topic.style.display = "block";
			break;
		case "5":
			opts = topicOpts["5"];
			topic.style.display = "block";
			break;
		case "6":
			opts = topicOpts["6"];
			topic.style.display = "block";
			break;
 case "7":
			opts = topicOpts["7"];
			topic.style.display = "block";
			break;
		case "8":
			opts = topicOpts["8"];
			topic.style.display = "block";
			break;
		case "9":
			opts = topicOpts["9"];
			topic.style.display = "block";
			break;
 case "10":
			opts = topicOpts["10"];
			topic.style.display = "block";
			break;
		case "11":
			opts = topicOpts["11"];
			topic.style.display = "block";
			break;
		case "12":
			opts = topicOpts["12"];
			topic.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
			topic.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		topic.appendChild(option);
	
	topic.style.display = "block";

#level, #topic 
 display: none

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="1">Biology</option>
			<option value="2">Chemistry</option>
			<option value="3">Physics</option>
			<option value="4">Maths</option>
		</select>
	</div>
</div>
<div class="border">
 <div class="custom-select">
 <select id="level"></select>
 </div>
</div>
<div class="border">
 <div class="custom-select">
	 <select id="topic"></select>
 </div>
</div>

answered Nov 15 '18 at 2:57

ecg8

8821515

Store each set of possibilities as an array and use an event listener to empty out and then refill your dropdowns each time the previous dropdown has been selected.

var levelOpts = 
	"1": [
		["1","Bio specific option #1"],["2","Bio specific option #2"],["3","Bio specific option #3"]
	],
	"2": [
		["4","Chem specific option #1"],["5","Chem specific option #2"],["6","Chem specific option #3"]
	],
 "3": [
		["7","Phys specific option #1"],["8","Phys specific option #2"],["9","Phys specific option #3"]
	],
	"4": [
		["10","Math specific option #1"],["11","Math specific option #2"],["12","Math specific option #3"]
	]
;
var topicOpts = 
	"1": [
		["0","Choose one"],["1","Bio specific suboption #1a"],["2","Bio specific suboption #1b"],["3","Bio specific suboption #1c"]
	],
	"2": [
		["0","Choose one"],["1","Bio specific suboption #2a"],["2","Bio specific suboption #2b"],["3","Bio specific suboption #2c"]
	],
 "3": [
		["0","Choose one"],["1","Bio specific suboption #3a"],["2","Bio specific suboption #3b"],["3","Bio specific suboption #3c"]
	],
	"4": [
		["0","Choose one"],["1","Chem specific suboption #1a"],["2","Chem specific suboption #1b"],["3","Chem specific suboption #1c"]
	],
	"5": [
		["0","Choose one"],["1","Chem specific suboption #2a"],["2","Chem specific suboption #2b"],["3","Chem specific suboption #2c"]
	],
 "6": [
		["0","Choose one"],["1","Chem specific suboption #3a"],["2","Chem specific suboption #3b"],["3","Chem specific suboption #3c"]
	],
 "7": [
		["0","Choose one"],["1","Phys specific suboption #1a"],["2","Phys specific suboption #1b"],["3","Phys specific suboption #1c"]
	],
	"8": [
		["0","Choose one"],["1","Phys specific suboption #2a"],["2","Phys specific suboption #2b"],["3","Phys specific suboption #2c"]
	],
 "9": [
		["0","Choose one"],["1","Phys specific suboption #3a"],["2","Phys specific suboption #3b"],["3","Phys specific suboption #3c"]
	],
	"10": [
		["0","Choose one"],["1","Math specific suboption #1a"],["2","Math specific suboption #1b"],["3","Math specific suboption #1c"]
	],
	"11": [
		["0","Choose one"],["1","Math specific suboption #2a"],["2","Math specific suboption #2b"],["3","Math specific suboption #2c"]
	],
 "12": [
		["0","Choose one"],["1","Math specific suboption #3a"],["2","Math specific suboption #3b"],["3","Math specific suboption #3c"]
	],
;
var subject = document.getElementById("subject");
var level = document.getElementById("level");
var topic = document.getElementById("topic");
subject.addEventListener("change", LevelFill);
level.addEventListener("change", TopicFill);
function LevelFill() 
	var opts = ;
 while (level.firstChild) 
 	level.firstChild.remove();
 
 switch(subject.value) 
 	case "1":
 	opts = levelOpts["1"];
			level.style.display = "block";
 break;
 case "2":
 	opts = levelOpts["2"];
			level.style.display = "block";
			break;
		case "3":
			opts = levelOpts["3"];
			level.style.display = "block";
			break;
		case "4":
			opts = levelOpts["4"];
			level.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		level.appendChild(option);
	
	topic.style.display = "none";

function TopicFill() 
	var opts = ;
	while (topic.firstChild) 
		topic.firstChild.remove();
	
	switch(level.value) 
		case "1":
			opts = topicOpts["1"];
			topic.style.display = "block";
			break;
		case "2":
			opts = topicOpts["2"];
			topic.style.display = "block";
			break;
		case "3":
			opts = topicOpts["3"];
			topic.style.display = "block";
			break;
 case "4":
			opts = topicOpts["4"];
			topic.style.display = "block";
			break;
		case "5":
			opts = topicOpts["5"];
			topic.style.display = "block";
			break;
		case "6":
			opts = topicOpts["6"];
			topic.style.display = "block";
			break;
 case "7":
			opts = topicOpts["7"];
			topic.style.display = "block";
			break;
		case "8":
			opts = topicOpts["8"];
			topic.style.display = "block";
			break;
		case "9":
			opts = topicOpts["9"];
			topic.style.display = "block";
			break;
 case "10":
			opts = topicOpts["10"];
			topic.style.display = "block";
			break;
		case "11":
			opts = topicOpts["11"];
			topic.style.display = "block";
			break;
		case "12":
			opts = topicOpts["12"];
			topic.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
			topic.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		topic.appendChild(option);
	
	topic.style.display = "block";

#level, #topic 
 display: none

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="1">Biology</option>
			<option value="2">Chemistry</option>
			<option value="3">Physics</option>
			<option value="4">Maths</option>
		</select>
	</div>
</div>
<div class="border">
 <div class="custom-select">
 <select id="level"></select>
 </div>
</div>
<div class="border">
 <div class="custom-select">
	 <select id="topic"></select>
 </div>
</div>

var levelOpts = 
	"1": [
		["1","Bio specific option #1"],["2","Bio specific option #2"],["3","Bio specific option #3"]
	],
	"2": [
		["4","Chem specific option #1"],["5","Chem specific option #2"],["6","Chem specific option #3"]
	],
 "3": [
		["7","Phys specific option #1"],["8","Phys specific option #2"],["9","Phys specific option #3"]
	],
	"4": [
		["10","Math specific option #1"],["11","Math specific option #2"],["12","Math specific option #3"]
	]
;
var topicOpts = 
	"1": [
		["0","Choose one"],["1","Bio specific suboption #1a"],["2","Bio specific suboption #1b"],["3","Bio specific suboption #1c"]
	],
	"2": [
		["0","Choose one"],["1","Bio specific suboption #2a"],["2","Bio specific suboption #2b"],["3","Bio specific suboption #2c"]
	],
 "3": [
		["0","Choose one"],["1","Bio specific suboption #3a"],["2","Bio specific suboption #3b"],["3","Bio specific suboption #3c"]
	],
	"4": [
		["0","Choose one"],["1","Chem specific suboption #1a"],["2","Chem specific suboption #1b"],["3","Chem specific suboption #1c"]
	],
	"5": [
		["0","Choose one"],["1","Chem specific suboption #2a"],["2","Chem specific suboption #2b"],["3","Chem specific suboption #2c"]
	],
 "6": [
		["0","Choose one"],["1","Chem specific suboption #3a"],["2","Chem specific suboption #3b"],["3","Chem specific suboption #3c"]
	],
 "7": [
		["0","Choose one"],["1","Phys specific suboption #1a"],["2","Phys specific suboption #1b"],["3","Phys specific suboption #1c"]
	],
	"8": [
		["0","Choose one"],["1","Phys specific suboption #2a"],["2","Phys specific suboption #2b"],["3","Phys specific suboption #2c"]
	],
 "9": [
		["0","Choose one"],["1","Phys specific suboption #3a"],["2","Phys specific suboption #3b"],["3","Phys specific suboption #3c"]
	],
	"10": [
		["0","Choose one"],["1","Math specific suboption #1a"],["2","Math specific suboption #1b"],["3","Math specific suboption #1c"]
	],
	"11": [
		["0","Choose one"],["1","Math specific suboption #2a"],["2","Math specific suboption #2b"],["3","Math specific suboption #2c"]
	],
 "12": [
		["0","Choose one"],["1","Math specific suboption #3a"],["2","Math specific suboption #3b"],["3","Math specific suboption #3c"]
	],
;
var subject = document.getElementById("subject");
var level = document.getElementById("level");
var topic = document.getElementById("topic");
subject.addEventListener("change", LevelFill);
level.addEventListener("change", TopicFill);
function LevelFill() 
	var opts = ;
 while (level.firstChild) 
 	level.firstChild.remove();
 
 switch(subject.value) 
 	case "1":
 	opts = levelOpts["1"];
			level.style.display = "block";
 break;
 case "2":
 	opts = levelOpts["2"];
			level.style.display = "block";
			break;
		case "3":
			opts = levelOpts["3"];
			level.style.display = "block";
			break;
		case "4":
			opts = levelOpts["4"];
			level.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		level.appendChild(option);
	
	topic.style.display = "none";

function TopicFill() 
	var opts = ;
	while (topic.firstChild) 
		topic.firstChild.remove();
	
	switch(level.value) 
		case "1":
			opts = topicOpts["1"];
			topic.style.display = "block";
			break;
		case "2":
			opts = topicOpts["2"];
			topic.style.display = "block";
			break;
		case "3":
			opts = topicOpts["3"];
			topic.style.display = "block";
			break;
 case "4":
			opts = topicOpts["4"];
			topic.style.display = "block";
			break;
		case "5":
			opts = topicOpts["5"];
			topic.style.display = "block";
			break;
		case "6":
			opts = topicOpts["6"];
			topic.style.display = "block";
			break;
 case "7":
			opts = topicOpts["7"];
			topic.style.display = "block";
			break;
		case "8":
			opts = topicOpts["8"];
			topic.style.display = "block";
			break;
		case "9":
			opts = topicOpts["9"];
			topic.style.display = "block";
			break;
 case "10":
			opts = topicOpts["10"];
			topic.style.display = "block";
			break;
		case "11":
			opts = topicOpts["11"];
			topic.style.display = "block";
			break;
		case "12":
			opts = topicOpts["12"];
			topic.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
			topic.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		topic.appendChild(option);
	
	topic.style.display = "block";

#level, #topic 
 display: none

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="1">Biology</option>
			<option value="2">Chemistry</option>
			<option value="3">Physics</option>
			<option value="4">Maths</option>
		</select>
	</div>
</div>
<div class="border">
 <div class="custom-select">
 <select id="level"></select>
 </div>
</div>
<div class="border">
 <div class="custom-select">
	 <select id="topic"></select>
 </div>
</div>

var levelOpts = 
	"1": [
		["1","Bio specific option #1"],["2","Bio specific option #2"],["3","Bio specific option #3"]
	],
	"2": [
		["4","Chem specific option #1"],["5","Chem specific option #2"],["6","Chem specific option #3"]
	],
 "3": [
		["7","Phys specific option #1"],["8","Phys specific option #2"],["9","Phys specific option #3"]
	],
	"4": [
		["10","Math specific option #1"],["11","Math specific option #2"],["12","Math specific option #3"]
	]
;
var topicOpts = 
	"1": [
		["0","Choose one"],["1","Bio specific suboption #1a"],["2","Bio specific suboption #1b"],["3","Bio specific suboption #1c"]
	],
	"2": [
		["0","Choose one"],["1","Bio specific suboption #2a"],["2","Bio specific suboption #2b"],["3","Bio specific suboption #2c"]
	],
 "3": [
		["0","Choose one"],["1","Bio specific suboption #3a"],["2","Bio specific suboption #3b"],["3","Bio specific suboption #3c"]
	],
	"4": [
		["0","Choose one"],["1","Chem specific suboption #1a"],["2","Chem specific suboption #1b"],["3","Chem specific suboption #1c"]
	],
	"5": [
		["0","Choose one"],["1","Chem specific suboption #2a"],["2","Chem specific suboption #2b"],["3","Chem specific suboption #2c"]
	],
 "6": [
		["0","Choose one"],["1","Chem specific suboption #3a"],["2","Chem specific suboption #3b"],["3","Chem specific suboption #3c"]
	],
 "7": [
		["0","Choose one"],["1","Phys specific suboption #1a"],["2","Phys specific suboption #1b"],["3","Phys specific suboption #1c"]
	],
	"8": [
		["0","Choose one"],["1","Phys specific suboption #2a"],["2","Phys specific suboption #2b"],["3","Phys specific suboption #2c"]
	],
 "9": [
		["0","Choose one"],["1","Phys specific suboption #3a"],["2","Phys specific suboption #3b"],["3","Phys specific suboption #3c"]
	],
	"10": [
		["0","Choose one"],["1","Math specific suboption #1a"],["2","Math specific suboption #1b"],["3","Math specific suboption #1c"]
	],
	"11": [
		["0","Choose one"],["1","Math specific suboption #2a"],["2","Math specific suboption #2b"],["3","Math specific suboption #2c"]
	],
 "12": [
		["0","Choose one"],["1","Math specific suboption #3a"],["2","Math specific suboption #3b"],["3","Math specific suboption #3c"]
	],
;
var subject = document.getElementById("subject");
var level = document.getElementById("level");
var topic = document.getElementById("topic");
subject.addEventListener("change", LevelFill);
level.addEventListener("change", TopicFill);
function LevelFill() 
	var opts = ;
 while (level.firstChild) 
 	level.firstChild.remove();
 
 switch(subject.value) 
 	case "1":
 	opts = levelOpts["1"];
			level.style.display = "block";
 break;
 case "2":
 	opts = levelOpts["2"];
			level.style.display = "block";
			break;
		case "3":
			opts = levelOpts["3"];
			level.style.display = "block";
			break;
		case "4":
			opts = levelOpts["4"];
			level.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		level.appendChild(option);
	
	topic.style.display = "none";

function TopicFill() 
	var opts = ;
	while (topic.firstChild) 
		topic.firstChild.remove();
	
	switch(level.value) 
		case "1":
			opts = topicOpts["1"];
			topic.style.display = "block";
			break;
		case "2":
			opts = topicOpts["2"];
			topic.style.display = "block";
			break;
		case "3":
			opts = topicOpts["3"];
			topic.style.display = "block";
			break;
 case "4":
			opts = topicOpts["4"];
			topic.style.display = "block";
			break;
		case "5":
			opts = topicOpts["5"];
			topic.style.display = "block";
			break;
		case "6":
			opts = topicOpts["6"];
			topic.style.display = "block";
			break;
 case "7":
			opts = topicOpts["7"];
			topic.style.display = "block";
			break;
		case "8":
			opts = topicOpts["8"];
			topic.style.display = "block";
			break;
		case "9":
			opts = topicOpts["9"];
			topic.style.display = "block";
			break;
 case "10":
			opts = topicOpts["10"];
			topic.style.display = "block";
			break;
		case "11":
			opts = topicOpts["11"];
			topic.style.display = "block";
			break;
		case "12":
			opts = topicOpts["12"];
			topic.style.display = "block";
			break;
		default:
			opts = ;
			level.style.display = "none";
			topic.style.display = "none";
	
	for (var i = 0; i < opts.length; i++) 
		var option = document.createElement("option");
		option.text = opts[i][1];
		option.value = opts[i][0];
		topic.appendChild(option);
	
	topic.style.display = "block";

#level, #topic 
 display: none

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="1">Biology</option>
			<option value="2">Chemistry</option>
			<option value="3">Physics</option>
			<option value="4">Maths</option>
		</select>
	</div>
</div>
<div class="border">
 <div class="custom-select">
 <select id="level"></select>
 </div>
</div>
<div class="border">
 <div class="custom-select">
	 <select id="topic"></select>
 </div>
</div>

answered Nov 15 '18 at 2:57

ecg8

8821515

answered Nov 15 '18 at 2:57

ecg8

8821515

answered Nov 15 '18 at 2:57

ecg8

8821515

answered Nov 15 '18 at 2:57

ecg8

8821515

I like your solution and I tried to use it, but it isn't working for me. I believe that my problem might be that the styling and/or the other scripts are interfering with your solution. If you find out why, I would be grateful. Thanks for the help though :)

– Abdul
Nov 15 '18 at 15:20

@ecg8 The main problem with this code is a lack of reusability. In a normal application, you'd do an ajax call to get the list of topic with the level as parameter then you'd refill the dropdown with the answer. Or if the list of topic never changed, you'd have a structure like "GSCE":[value:"val1", ..., ...], "asLeve": ... and you'd fetch the list then called a fill function with it. But, you wouldn't have two fill function.

– Dominique Fortin
Nov 15 '18 at 15:59

add a comment |

I like your solution and I tried to use it, but it isn't working for me. I believe that my problem might be that the styling and/or the other scripts are interfering with your solution. If you find out why, I would be grateful. Thanks for the help though :)

– Abdul
Nov 15 '18 at 15:20

@ecg8 The main problem with this code is a lack of reusability. In a normal application, you'd do an ajax call to get the list of topic with the level as parameter then you'd refill the dropdown with the answer. Or if the list of topic never changed, you'd have a structure like "GSCE":[value:"val1", ..., ...], "asLeve": ... and you'd fetch the list then called a fill function with it. But, you wouldn't have two fill function.

– Dominique Fortin
Nov 15 '18 at 15:59

I like your solution and I tried to use it, but it isn't working for me. I believe that my problem might be that the styling and/or the other scripts are interfering with your solution. If you find out why, I would be grateful. Thanks for the help though :)

– Abdul
Nov 15 '18 at 15:20

@ecg8 The main problem with this code is a lack of reusability. In a normal application, you'd do an ajax call to get the list of topic with the level as parameter then you'd refill the dropdown with the answer. Or if the list of topic never changed, you'd have a structure like "GSCE":[value:"val1", ..., ...], "asLeve": ... and you'd fetch the list then called a fill function with it. But, you wouldn't have two fill function.

– Dominique Fortin
Nov 15 '18 at 15:59

add a comment |

Here is the code:

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () );
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.1em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;


.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

Thanks.

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 12:26

Abdul

3610

add a comment |

Here is the code:

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () );
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.1em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;


.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

Thanks.

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 12:26

Abdul

3610

add a comment |

Here is the code:

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () );
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.1em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;


.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

Thanks.

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 12:26

Abdul

3610

Here is the code:

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () );
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.1em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;


.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

Thanks.

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () );
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.1em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;


.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

$(document).ready(function () 

	var mySubject = new myNameSpace.myDropDown('subject');
	var myLevel = new myNameSpace.myDropDown('level');
	var myTopic = new myNameSpace.myDropDown('topic');

	$("#level").change(function () );
 
);


(function module (global) )(window);


function closeAllSelect(elmnt) 
	//a function that will close all select boxes in the document,
	//except the current select box:
	var x, y, i, arrNo = ;
	x = document.getElementsByClassName("select-items");
	y = document.getElementsByClassName("select-selected");
	for (i = 0; i < y.length; i++) 
		if (elmnt == y[i]) 
			arrNo.push(i)
		
		else 
			y[i].classList.remove("select-arrow-active");
		
	
	for (i = 0; i < x.length; i++) 
		if (arrNo.indexOf(i)) 
			x[i].classList.add("select-hide");
		
	


//if the user clicks anywhere outside the select box,
//then close all select boxes:
document.addEventListener("click", closeAllSelect);

.custom-select 
	width: 100%;
	position: relative;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.1em;


.custom-select select 
	display: none;


.select-selected 
	border-radius: 13px;
	float: center;
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;


.select-selected:before 
	background: white;


.select-selected:after 
	border-radius: 3px;
	float: right;
	position: relative;
	content: "";
	top: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;


.select-selected.select-arrow-active:after 
	border-color: transparent transparent #fff transparent;
	top: 2px;


.select-items div,.select-selected 
	transition: 0.2s;
	color: #ffffff;
	padding: 10px;
	cursor: pointer;
	user-select: none;


.select-items 
	margin-top: 3px;
	position: relative;
	background: rgb(13,13,13);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	border-radius: 13px;
	overflow: hidden;


.select-hide 
	display: none;


.select-items div:hover, .same-as-selected 
	background: linear-gradient(to left, rgb(0,176,240), rgb(0,112,192));
	box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="border">
	<div class="custom-select">
		<select id="subject">
			<option value="0">Select a subject</option>
			<option value="biology">Biology</option>
			<option value="chemistry">Chemistry</option>
			<option value="physics">Physics</option>
			<option value="math">Maths</option>
			<option value="english">English</option>
			<option value="art">Art</option>
			<option value="re">RE</option>
			<option value="computing">Computing</option>
		</select>
	</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
 <select id="level">
 <option value="0">Select the qualification</option>
 <option value="GCSE">GCSE</option>
 <option value="asLevel">AS Level</option>
 <option value="aLevel">A Level</option>
 </select>
</div>
</div>
<br/>
<br/>
<div class="border">
<div class="custom-select">
	<select id="topic">
	 <option value="0">Select the topic</option>
	</select>
</div>
</div>

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 12:26

Abdul

3610

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 12:26

Abdul

3610

answered Nov 22 '18 at 12:26

Abdul

3610

answered Nov 22 '18 at 12:26

Abdul

3610

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj