how to change options in a selection based on the chosen option in another selection
0
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) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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
asked Nov 14 '18 at 19:13
AbdulAbdul
3610
add a comment |
0
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) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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
asked Nov 14 '18 at 19:13
AbdulAbdul
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();afters.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 |
0
0
0
0
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) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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
asked Nov 14 '18 at 19:13
AbdulAbdul
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) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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
javascript jquery html css
asked Nov 14 '18 at 19:13
AbdulAbdul
3610
asked Nov 14 '18 at 19:13
AbdulAbdul
3610
edited Nov 22 '18 at 11:49
Abdul
asked Nov 14 '18 at 19:13
AbdulAbdul
3610
asked Nov 14 '18 at 19:13
AbdulAbdul
3610
asked Nov 14 '18 at 19:13
AbdulAbdul
3610
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();afters.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();afters.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
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
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
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 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
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
2
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>answered Nov 15 '18 at 2:04
Dominique FortinDominique 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 |
1
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
ecg8ecg8
9311615
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 |
0
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 ()
var val = $("#level").val();
var subVal = $("#subject").val();
if (val === "0" );
);
(function module (global) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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.
answered Nov 22 '18 at 12:26
AbdulAbdul
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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>answered Nov 15 '18 at 2:04
Dominique FortinDominique 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 |
2
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>answered Nov 15 '18 at 2:04
Dominique FortinDominique 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 |
2
2
2
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>answered Nov 15 '18 at 2:04
Dominique FortinDominique 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>answered Nov 15 '18 at 2:04
Dominique FortinDominique Fortin
1,648816
edited Nov 21 '18 at 3:27
answered Nov 15 '18 at 2:04
Dominique FortinDominique Fortin
1,648816
answered Nov 15 '18 at 2:04
Dominique FortinDominique Fortin
1,648816
answered Nov 15 '18 at 2:04
Dominique FortinDominique Fortin
1,648816
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
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
1
@Abdul The dropdown are closing now when you click outside of it.
– Dominique Fortin
Nov 21 '18 at 3:29
@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
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
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
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 |
1
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
ecg8ecg8
9311615
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 |
1
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
ecg8ecg8
9311615
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 |
1
1
1
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
ecg8ecg8
9311615
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>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
ecg8ecg8
9311615
answered Nov 15 '18 at 2:57
ecg8ecg8
9311615
answered Nov 15 '18 at 2:57
ecg8ecg8
9311615
answered Nov 15 '18 at 2:57
ecg8ecg8
9311615
9311615
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
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
@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 |
0
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 ()
var val = $("#level").val();
var subVal = $("#subject").val();
if (val === "0" );
);
(function module (global) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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.
answered Nov 22 '18 at 12:26
AbdulAbdul
3610
add a comment |
0
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 ()
var val = $("#level").val();
var subVal = $("#subject").val();
if (val === "0" );
);
(function module (global) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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.
answered Nov 22 '18 at 12:26
AbdulAbdul
3610
add a comment |
0
0
0
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 ()
var val = $("#level").val();
var subVal = $("#subject").val();
if (val === "0" );
);
(function module (global) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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.
answered Nov 22 '18 at 12:26
AbdulAbdul
3610
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 ()
var val = $("#level").val();
var subVal = $("#subject").val();
if (val === "0" );
);
(function module (global) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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.
$(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();
var subVal = $("#subject").val();
if (val === "0" );
);
(function module (global) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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 ()
var val = $("#level").val();
var subVal = $("#subject").val();
if (val === "0" );
);
(function module (global) ;
global.myNameSpace.myDropDown = myDropDown;
function myDropDown (id)
var formSelectJQ, lov, selectedLOVIndex;
ctor();
this.getValue = getValue;
this.setValue = setValue;
this.changeList = changeList;
function ctor()
formSelectJQ= $('#'+id);
$(formSelectJQ).css('display','none');
$('<div id="'+id+'_myDropDown" class="border" style="display: none;">'
+'<div class="custom-select">'
+'<div class="select-selected"></div>'
+'<div class="select-items select-hide"></div>'
+'<div></div>').insertAfter(formSelectJQ);
renderList();
$('#'+id+'_myDropDown')
.on('click', selectOnClick)
.css('display','block');
function renderList ()
readLOV();
var val = getValue();
var list = lov.map((e) =>
return '<div value="'+e.value+'" '
+(e.value === val ? 'class="same-as-selected"' : '')
+'>'+e.label+'</div>';
);
$('#'+id+'_myDropDown .select-items')
.empty()
.append(list.join(''));
$('#'+id+'_myDropDown .select-items div')
.on('click', optionOnClick);
setValue(val);
function readLOV ()
lov = ;
selectedLOVIndex = -1;
$('#'+id+' option').each((i,e) =>
lov.push("value":e.value,"label":e.innerHTML);
if (e.selected)
selectedLOVIndex = lov.length-1;
);
selectedLOVIndex = (selectedLOVIndex < 0 ? 0 : selectedLOVIndex);
if (lov.length <= 0)
lov = ["value":'',"label":' '];
function writeLOV ()
var list = lov.map((e) =>
return '<option value="'+e.value+'">'+e.label+'</option>';
);
$('#'+id).empty().append(list.join(''));
function getValue ()
readLOV();
return lov[selectedLOVIndex].value;
function setValue (val)
$('#'+id+'_myDropDown .select-items .same-as-selected')
.removeClass("same-as-selected");
formSelectJQ.prop('value', val);
readLOV();
if (lov.length > 0)
$('#'+id+'_myDropDown .select-selected').html(lov[selectedLOVIndex].label);
else
$('#'+id+'_myDropDown .select-selected').html(" ");
$('#'+id+'_myDropDown .select-items div[value="'+getValue()+'"]')
.addClass("same-as-selected");
formSelectJQ.trigger('change');
function selectOnClick (event)
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
event.stopPropagation();
$('#'+id+'_myDropDown .select-items').toggleClass("select-hide");
$('#'+id+'_myDropDown .select-selected').toggleClass("select-arrow-active");
function optionOnClick (event)
/*when an item is clicked, update the original select box,
and the selected item:*/
setValue( $(event.target).attr('value') );
function changeList (listOfValues, defaultValue) val);
renderList();
)(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>answered Nov 22 '18 at 12:26
AbdulAbdul
3610
edited Nov 22 '18 at 15:13
answered Nov 22 '18 at 12:26
AbdulAbdul
3610
answered Nov 22 '18 at 12:26
AbdulAbdul
3610
answered Nov 22 '18 at 12:26
AbdulAbdul
3610
3610
add a comment |
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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();afters.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