Here is a sample code for select tag using JavaScript. Here is the demo.
select-tag-sample-code.netlify.app
*What you can do with this select tag?:
- Select the language name for the food such as "Japanese food" from the options.
- Then, language name and 3 menus are shown.
- If "Show All" is selected, all menu are shown with their language names.
*How to iterate objects?:
I made an array that contains the language name and menus for each language as below.
let foodArr= [
{
language: "Japanese food",
menu:["Sushi","Ramen","Miso soup"]
},...]
I knew you need to use "Object.keys(XXX).map(i=>{...}) " method to iterate object. However, I did not really understand what the argument (i) was doing. I finally knew that it is a key for the each value in one object, NOT a index number. :D
*Code sample
---index.html----
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<select id="select">
<option>Select food...</option>
<option value="jp">Japanese Food</option>
<option value="en">English Food</option>
<option value="fr">French Food</option>
<option value="all">Show All</option>
</select>
<div id="result"></div>
<script src="./main.js"></script>
</body>
</html>
---main.js---
//Array of objects for the menu of each language
let foodArr = [
{
language: "Japanese food",
menu:["Sushi","Ramen","Miso soup"]
},
{
language: "English food",
menu:["Cottage pie","Yorkshire pudding","Shepherds' pie"]
},
{
language: "French food",
menu: ["Bisque", "Croque-madame","Pot-au-feu"]
}
];
//Function that returns language name
let displayLanguageName=lang=> {
let result = '';
result = <div style="font-weight:bold; margin-right:20px;margin-top:20px;">${lang}</div>;
return result;
}
//Function that returns menu name
let displayMenu=menuObj=> {
let result = '';
Object.keys(menuObj).map(m => {
result +=<span style="margin-right:20px;">${menuObj[m]}</span>
});
return result;
}
//Function that returns language name + menu
let displayOneLanguage=object=> {
let result = '';
Object.keys(object).map(o => {
if (o === 'language') {
result += displayLanguageName(object[o]);
}
if (o === 'menu') {
result += displayMenu(object[o])
}
});
return result;
}
//Function that returns laguage name + menu for all languages
let displayAllLanguages=objArr=> {
let result = '';
if (objArr.length > 1) {
objArr.map(o => {
result += displayOneLanguage(o);
});
} else {
result=displayOneLanguage(objArr);
}
return result;
}
//Get DOM for select tag.
let select = document.querySelector('#select');
//Event ignition
select.addEventListener('change', (e) => {
//Get the selected value
const selectedVal = e.target.value;
//Get the node that displays the result
const result = document.querySelector('#result');
//If "Japanese food" is selected
if (selectedVal === "jp") {
result.innerHTML = displayAllLanguages(foodArr[0]);
//If "English food" is selected
} else if (selectedVal === "en") {
result.innerHTML = displayAllLanguages(foodArr[1]);
//If "French food" is selected
} else if (selectedVal === "fr") {
result.innerHTML = displayAllLanguages(foodArr[2]);
//If All food is selected
} else if(selectedVal === "all") {
result.innerHTML = displayAllLanguages(foodArr);
//Other（e.g. when the value is null）
}else {
result.innerHTML = "";
}
});
Top comments (0)