Develop Reference

How to hide single div based on selected option from dropdown

I have to make sure the second dropdown menu only starts showing when an option ("Tijd" or "Woorden") is selected in the first one. When no option is selected afterwards, the second dropdown has to hide again.
HTML
<div class="dropdown">
<p>Spelmodus:</p>
<select id="spelmodus" name="spelmodus" onchange="changeSpelmodus(this.value);">
<option></option>
</select>
</div>
<div id="optieDiv">
<p id="tijdWoorden"></p>
<select id="opties" name="opties" onchange="changeOptie(this.value);">
</select>
</div>
JavaScript
var spelmodusOpties = {
"Tijd": [{"Optie": "1 minuut"}, {"Optie": "2 minuten"}, {"Optie": "5 minuten"}],
"Woorden": [{"Optie": "50 woorden"}, {"Optie": "100 woorden"}, {"Optie": "150 woorden"}],
};
function PrepopulateSpelmodus() {
var spelmodusSelect = document.getElementById('spelmodus');
var i = 1;
for (var spelmodus in spelmodusOpties) {
spelmodusSelect.options[i++] = new Option(spelmodus)
}
}
function changeSpelmodus(productNameID) {
var optieSelect = document.getElementById('opties');
optieSelect.innerHTML = '<option></option>'; // Remove previous options
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
optieSelect.appendChild(new Option(versions[i].Optie));
}
var selectie = document.getElementById('spelmodus').value;
document.getElementById('tijdWoorden').innerHTML = selectie
}
function changeOptie() {
var productNameID = document.getElementById('spelmodus').value;
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
}
}
PrepopulateSpelmodus();

You just need to validate and hide on change of select
if(!productNameID){
document.getElementById('optieDiv').style.display = "none"
return;
}else{
document.getElementById('optieDiv').style.display = ""
}
var spelmodusOpties = {
"Tijd": [{"Optie": "1 minuut"}, {"Optie": "2 minuten"}, {"Optie": "5 minuten"}],
"Woorden": [{"Optie": "50 woorden"}, {"Optie": "100 woorden"}, {"Optie": "150 woorden"}],
};
function PrepopulateSpelmodus() {
var spelmodusSelect = document.getElementById('spelmodus');
var i = 1;
for (var spelmodus in spelmodusOpties) {
spelmodusSelect.options[i++] = new Option(spelmodus)
}
}
function changeSpelmodus(productNameID) {
if(!productNameID){
document.getElementById('optieDiv').style.display = "none"
return;
}else{
document.getElementById('optieDiv').style.display = ""
}
var optieSelect = document.getElementById('opties');
optieSelect.innerHTML = '<option></option>'; // Remove previous options
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
optieSelect.appendChild(new Option(versions[i].Optie));
}
var selectie = document.getElementById('spelmodus').value;
document.getElementById('tijdWoorden').innerHTML = selectie
}
function changeOptie() {
var productNameID = document.getElementById('spelmodus').value;
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
}
}
PrepopulateSpelmodus();
<div class="dropdown">
<p>Spelmodus:</p>
<select id="spelmodus" name="spelmodus" onchange="changeSpelmodus(this.value);">
<option></option>
</select>
</div>
<div id="optieDiv" style="display: none">
<p id="tijdWoorden"></p>
<select id="opties" name="opties" onchange="changeOptie(this.value);">
</select>
</div>

const optieDivEl = document.querySelector('#optieDiv');
function toggleOptieDiv(event) {
// Check if the event.target (select) is one of the specified values
if (['tijd', 'woorden'].includes(event.target.value)) {
// Do no render `div.optieDiv`
optieDivEl.style.display = 'none';
} else {
// Render `div.optieDiv`
optieDivEl.style.display = 'block';
}
}
document.onload = toggleOptieDiv;
document.querySelector('#spelmodus').addEventListener('change', toggleOptieDiv);
<div class="dropdown">
<p>Spelmodus:</p>
<select id="spelmodus" name="spelmodus">
<option value="">--Please choose an option--</option>
<option value="tijd">Tijd</option>
<option value="woorden">Woorden</option>
<option value="other">Other</option>
</select>
</div>
<div id="optieDiv">
<p id="tijdWoorden"></p>
<select id="opties" name="opties" onchange="changeOptie(this.value);">
</select>
</div>

Chaining Drop-Down Lists

I'm doing my first project in HTML/CSS/JavaScript. I'm fluent in Java and C.
I have a group of images that are separated in multi level groups/subgroups. Before I present them I need to choose the groups using DDL (Drop-Down Lists). I want to display the first DDL and only after selected, present the 2nd and so on. For example I have a DDL with [Group A, Group B, Group C] and if I choose Group A then it appears a 2nd DDL with the options [Group AA, Group AB]. If I choose the Group AA then it appears a 3rd DDL. If I choose the Group AB the pictures from that group should be presented (because there are no subgroups inside Group AB). I only need at most 3 levels (like in the picture). The groups are fixed, they never change.
Keep in mind that if I'm in Group AAA and I change the first DDL to Group B, the 2nd DDL should reset (and change its options) and the 3rd DDL should disappear.
How can I achieve this?

I made a fiddle to demo this. Hopefully it is what you are trying to accomplish. The fiddle is very basic and could be refined and refactored to be more dynamic/generic
var optionAppendValues = ["A", "B", "C"];
function createTwo() {
var selectOneValue = document.getElementById('images_one').value;
var selectTwo = document.getElementById('images_two');
resetTwo();
resetThree();
if(selectOneValue !== "default") {
for (i = 0; i < 3; i++) {
var option = document.createElement("option");
option.text = "Group " + selectOneValue + optionAppendValues[i];
option.value = selectOneValue + optionAppendValues[i];
selectTwo.add(option);
}
selectTwo.style.display = "block";
}
}
function createThree() {
var selectTwoValue = document.getElementById('images_two').value;
var selectThree = document.getElementById('images_three');
resetThree();
if(selectTwoValue !== "default") {
for (i = 0; i < 3; i++) {
var option = document.createElement("option");
option.text = "Group " + selectTwoValue + optionAppendValues[i];
option.value = selectTwoValue + optionAppendValues[i];
selectThree.add(option);
}
selectThree.style.display = "block";
}
}
function resetTwo(){
var selectTwo = document.getElementById('images_two');
for (i = 3; i > 0; i--) {
var option = document.createElement("option");
selectTwo.remove(i);
}
selectTwo.style.display = "none";
}
function resetThree(){
var selectThree = document.getElementById('images_three');
for (i = 3; i > 0; i--) {
var option = document.createElement("option");
selectThree.remove(i);
}
selectThree.style.display = "none";
}
#images_two, #images_three {
display:none;
margin-left: 55px;
margin-top: 5px
}
<div class="container">
<label for="images_one">Images:</label>
<select name="images_one" id="images_one" onchange="createTwo()">
<option value="default">Please select...</option>
<option value="A">Group A</option>
<option value="B">Group B</option>
<option value="C">Group C</option>
</select>
<select name="images_two" id="images_two" onchange="createThree()">
<option value="default">Please select...</option>
</select>
<select name="images_three" id="images_three">
<option value="default">Please select...</option>
</select>
</div>

Country and State selection using html and Javascript

I have applied the logic in view.jsp in Liferay to show the state list on State drop down based on the Country selected from the Country drop down. I have used html and java script to achieve this goal of showing the state drop down for the selected country from drop down list. Currently, when I first load the form, both of the Country and the state label with drop down is displaying. The state drop down is empty at first. Then when I select country, Example: USA, state drop down is changed to the state list related to USA which is working as expected. But, I want to not show the state drop down and State label at first when form is loaded as it will be empty and there will be "Select Country" option only selected in Country drop down. This is not working for me. Any idea what should I do to make State label and drop down to show at first when form loads and just to show state drop down list only when the country is selected from Country drop down?
Below is the html and java script code that I have:
<select name="<portlet:namespace/>Country" id="countryId" onchange="javascript:countryChange()">
<option value="0">Select Country</option>
<option value='US'>United States</option>
<option value='CA'>Canada</option>
</select>
<label id="stateLabel">State:</label>
<select name="<portlet:namespace/>State" id="stateId">
</select>
<!--Country and State Change Javascript-->
<script>
function CountryChange() {
var countryState = [
[
'US', [
['', 'State/Province'],
['AL', 'Alabama'],
['AK', 'Alaska'],
['AZ', 'Arizona'],
['AR', 'Arkansas'],
], ],
[
'CA', [
['', 'State/Province'],
['AB', 'Alberta'],
['BC', 'British Columbia'],
['MB', 'Manitoba'],
['NB', 'New Brunswick'],
]]
];
var countryElement = document.getElementById('countryId');
var stateElement = document.getElementById('stateId');
var stateLabelElement = document.getElementById('stateLabel');
if (countryElement && stateElement) {
var listOfState = [
['XX', 'None']
];
var currentCountry = countryElement.options[countryElement.selectedIndex].value;
for (var i = 0; i < countryState.length; i++) {
if (currentCountry == countryState[i][0]) {
listOfState = countryState[i][1];
}
}
if (listOfstate.length < 2)
{
stateElement.style.display = 'none';
stateLabelElement.style.display = 'none';
}
else
{
stateElement.style.display = 'inline';
stateLabelElement.style.display = 'inline';
}
var selectedState;
for (var i = 0; i < stateElement.length; i++) {
if (stateElement.options[i].selected === true) {
selectedState = stateElement.options[i].value;
}
}
stateElement.options.length = 0;
for (var i = 0; i < listOfState.length; i++) {
stateElement.options[i] = new Option(listOfState[i][1], listOfState[i][0]);
if (listOfState[i][0] == selectedState) {
stateElement.options[i].selected = true;
}
}
}
}
</script>

You had a lot of mis-spellings. Check this out: https://jsfiddle.net/jj8we58t/1/
I also set the initial display to none for the stateLabel and stateId elements.
<label id="stateLabel" style="display: none">State:</label>
<select name="<portlet:namespace/>State" style="display: none" id="stateId">

Your code was close, but due to some inconsistencies in variable names, it failed to function. For instance, your onchange event is bound to countryChange, but your function is named CountryChange. It's a good idea to drop your script into some sort of validator like jsHint to analyze why your code isn't working as expected.
with a couple tweaks and those inconsistencies ironed out, it appears to be functioning as expected now
HTML:
<select name="<portlet:namespace/>Country" id="countryId" onchange="window.CountryChange()">
<option value="0">Select Country</option>
<option value='US'>United States</option>
<option value='CA'>Canada</option>
</select>
<div id="stateField" style="display:none">
<label id="stateLabel">State:</label>
<select name="<portlet:namespace/>State" id="stateId">
</select>
</div>
JS:
window.CountryChange = function () {
var countryState = [
[
'US', [
['', 'State/Province'],
['AL', 'Alabama'],
['AK', 'Alaska'],
['AZ', 'Arizona'],
['AR', 'Arkansas'],
],
],
[
'CA', [
['', 'State/Province'],
['AB', 'Alberta'],
['BC', 'British Columbia'],
['MB', 'Manitoba'],
['NB', 'New Brunswick'],
]
]
];
var countryElement = document.getElementById('countryId');
var stateElement = document.getElementById('stateId');
var stateLabelElement = document.getElementById('stateLabel');
var stateFieldElement = document.getElementById('stateField');
if (countryElement && stateElement) {
var listOfState = [
['XX', 'None']
];
var currentCountry = countryElement.options[countryElement.selectedIndex].value;
for (var i = 0; i < countryState.length; i++) {
if (currentCountry == countryState[i][0]) {
listOfState = countryState[i][1];
}
}
if (listOfState.length < 2) {
stateFieldElement.style.display = "none";
} else {
stateFieldElement.style.display = "inline-block";
}
var selectedState;
for (var i = 0; i < stateElement.length; i++) {
if (stateElement.options[i].selected === true) {
selectedState = stateElement.options[i].value;
}
}
stateElement.options.length = 0;
for (var i = 0; i < listOfState.length; i++) {
stateElement.options[i] = new Option(listOfState[i][1], listOfState[i][0]);
if (listOfState[i][0] == selectedState) {
stateElement.options[i].selected = true;
}
}
}
}

Dynamic Dropdown Redirection

I'm using JS to dynamically populate a select list from the option of another select list. The population is working correctly, however once the second option is picked I want the user to be navigated to the girl URL. What am I missing?
< script type = "text/javascript" >
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "Chevy") {
var optionArray = ["|", "http://www.example.com|Camaro", "http://www.example.com|Corvette", "impala|Impala"];
} else if (s1.value == "Dodge") {
var optionArray = ["|", "http://www.example.com|Avenger", "http://www.example.com|Challenger", "http://www.example.com|Charger"];
} else if (s1.value == "Ford") {
var optionArray = ["|", "http://www.example.com|Mustang", "http://www.example.com|Shelby"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
< /script>
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Chevy">Chevy</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
<select id="slct2" name="slct2" onchange="form.submit()"></select>

Assuming your form looks like this:
<form name='form' id='exampleForm' action='whatever'>...</form>
your onchange event should look like this:
onchange="document.form.submit()"
or
onchange="document.getElementById('exampleForm').submit()"
Alternatively, you don't even need a form. You could do:
onchange="window.location.href='my.url'"
...or put it in a function:
onchange="foo()"
...
function foo() {
var s2 = document.getElementById('slct2');
window.location.href = "my.url?model=" + s2.options[s2.selectedIndex].value;
}

how to java-script populate 2 select on selecting one?

Hi there i m new here in php so i need a help guys.
I have one input and 2 select option here i want ---- if input is empty than both select are also be empty if input have some value than first select options value should be 'open' and respectively second select value should be 'form distributed' like this, here the both select are working fine but not following by input field any help will be gratfull thank you
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
var Open = new Array('Form Distributed');
var Completed = new Array('Ready for billing', 'Completed');
var Pending = new Array('With CS', 'With O&M (Estimate)', 'With Delegate','With Executive Engineer','With Consumer (Payment)','With O&M (Connection)');
var Rejected = new Array('Rejected: By CS', 'Rejected: By O&M', 'Rejected: By Delegate','Rejected: By EE','Rejected: Demand Expired','Rejected: By O&M');
switch (ddl1.value) {
case 'Open':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Open.length; i++) {
createOption(document.getElementById(ddl2), Open[i], Open[i]);
}
break;
case 'Completed':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Completed.length; i++) {
createOption(document.getElementById(ddl2), Completed[i], Completed[i]);
}
break;
case 'Pending':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Pending.length; i++) {
createOption(document.getElementById(ddl2), Pending[i], Pending[i]);
}
break;
case 'Rejected':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Rejected.length; i++) {
createOption(document.getElementById(ddl2), Rejected[i], Rejected[i]);
}
break;
default:
document.getElementById(ddl2).options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
</head>
<input type="text" name="date" id="datepicker">
<select id="ddl" onChange="configureDropDownLists(this,'ddl2')">
<option value="0" ></option>
<option value="Open">Open</option>
<option value="Completed">Completed</option>
<option value="Pending">Pending</option>
<option value="Rejected">Rejected</option>
</select>
<select id="ddl2">
</select>
</body>
</html>

$(document).ready(function(){
changeInput();
$("#datepicker").change(function(){
changeInput();
});
});
var optios = ['Open','Completed','Pending','Rejected'];
function changeInput(){
var input = $("#datepicker").val();
var ddl = document.getElementById("ddl");
ddl.options.length = 0;
document.getElementById("ddl2").options.length = 0;
if(input==""){
}else{
$.each(optios,function(){
var opt = document.createElement('option');
opt.value = this;
opt.text = this;
ddl.options.add(opt);
});
$("#ddl").val("Open");
configureDropDownLists(ddl,'ddl2');
}
}