If you select the "tv" option, it displays a div, and if you select the "cooker" options, it displays a different div. I want to make it so when one option is selected, the prior div elements have their display become "none."
I've tried making it so when a value is selected, it's display is equal to block and I made an array to make the other div element displays to "none." My code doesn't work though.
Thank you to anyone that helps.
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<main>
<h1>Add appliance</h1>
<p>Please provide the details for the appliance</p>
<form action="">
<fieldset style="border:none">
<label for="appliance-type">Appliance type:</label>
<select onchange="show(value)" name="appliance-type" id="appliance-type">
<option value="" selected disabled>Choose appliance</option>
<option value="tv">TV</option>
<option value="cooker">Cooker</option>
</select>
<!-- style="display:none;" -->
<div id="tv">
<label for="manufacturer">Manufacturer:  </label>
<select name="tv-manufacturer" id="tv-manufacturer">
<option value="" selected disabled> </option>
<option value="narkasse">Narkasse </option>
</select>
<br>
<label for="model-name">Model Name</label>
<input type="text" name="model-name" id="model-name">
<br>
<hr>
<label for="">Display Type</label>
<select name="" id="">
<option value="" selected disabled> </option>
<option value="display-type">LED</option>
</select>
</div>
<div style="display:none;" id="cooker">
<p>cooker</p>
<p>cooker</p>
<p>cooker</p>
</div>
</fieldset>
</form>
</main>
</body>
</html>
css code:
*{
box-sizing: border-box;
}
fieldset{
padding: 0;
}
.options{
height:30px;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
padding-right: 1.25EM;
padding-left: 0.25EM;
border-radius: 10px;
background-image: url("data:image/svg xml;charset=utf8,");
background-repeat: no-repeat;
background-size: 1.5EM 1EM;
background-position: right center;
margin-bottom: 20px;
}
.tv-options-container, .cooker-options-container{
display: none;
}
js code:
const tvContainer=document.getElementsByClassName("tv-options-container")[0];
const applianceType=document.getElementById("appliance-type");
// const applianceOptions=document.querySelectorAll(".appliance-type.option");
const opTest=document.querySelectorAll("appliance-type.option");
var selectedApp=null;
var optionsArr=[];
var values = Array.from(document.getElementById("appliance-type").options).map(e => e.value);
optionsArr.append(values);
function show(value_){
document.getElementById(value_).style.display="block";
for(let i=0;i<optionsArr.length;i ){
if(optionsArr[i]!=value_){
document.getElementById(optionsArr[i]).style.display="none";
}
}
// selectedApp=applianceType.value;
}
CodePudding user response：
Your js code seems a bit complexed,since there are just two options in the select component,we can use below code to simplify it
let divs = document.querySelectorAll("div[class*='-options-container']" )
function show(value){
if(value === 'tv'){
divs[0].style.display = "block";
divs[1].style.display = "none";
}else{
divs[1].style.display = "block";
divs[0].style.display = "none";
}
}
If there are multiple options,then we need to iterate them first,to make each of them display to none,then change the current element display to block
let divs = document.querySelectorAll("div[class*='-options-container']" )
function show(value){
if(value === 'tv'){
divs[0].style.display = "block";
divs[1].style.display = "none";
}else{
divs[1].style.display = "block";
divs[0].style.display = "none";
}
}*{
box-sizing: border-box;
}
fieldset{
padding: 0;
}
.options{
height:30px;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
padding-right: 1.25EM;
padding-left: 0.25EM;
border-radius: 10px;
background-image: url("data:image/svg xml;charset=utf8,");
background-repeat: no-repeat;
background-size: 1.5EM 1EM;
background-position: right center;
margin-bottom: 20px;
}
.tv-options-container, .cooker-options-container{
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<main>
<h1>Add appliance</h1>
<p>Please provide the details for the appliance</p>
<form action="">
<fieldset style="border:none">
<label for="appliance-type">Appliance type:</label>
<select onchange="show(value)" name="appliance-type" id="appliance-type">
<option value="" selected disabled>Choose appliance</option>
<option value="tv">TV</option>
<option value="cooker">Cooker</option>
</select>
<!-- style="display:none;" -->
<div id="tv">
<label for="manufacturer">Manufacturer:  </label>
<select name="tv-manufacturer" id="tv-manufacturer">
<option value="" selected disabled> </option>
<option value="narkasse">Narkasse </option>
</select>
<br>
<label for="model-name">Model Name</label>
<input type="text" name="model-name" id="model-name">
<br>
<hr>
<label for="">Display Type</label>
<select name="" id="">
<option value="" selected disabled> </option>
<option value="display-type">LED</option>
</select>
</div>
<div style="display:none;" id="cooker">
<p>cooker</p>
<p>cooker</p>
<p>cooker</p>
</div>
</fieldset>
</form>
</main>
</body>
</html>CodePudding user response：
You have done a great job!! There are just two things to take care of:
Your options array consists of
""Hence, add a condition check if the value is not"". Something like:if(optionsArr[i] && optionsArr[i]!=value_){Directly save the values in optionsArr
const tvContainer=document.getElementsByClassName("tv-options-container")[0];
const applianceType=document.getElementById("appliance-type");
// const applianceOptions=document.querySelectorAll(".appliance-type.option");
const opTest=document.querySelectorAll("appliance-type.option");
var selectedApp=null;
var optionsArr = Array.from(document.getElementById("appliance-type").options).map(e => e.value);
function show(value_){
document.getElementById(value_).style.display="block";
for(let i=0;i<optionsArr.length;i ){
if(optionsArr[i] && optionsArr[i]!=value_){
document.getElementById(optionsArr[i]).style.display="none";
}
}
// selectedApp=applianceType.value;
}*{
box-sizing: border-box;
}
fieldset{
padding: 0;
}
.options{
height:30px;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
padding-right: 1.25EM;
padding-left: 0.25EM;
border-radius: 10px;
background-image: url("data:image/svg xml;charset=utf8,");
background-repeat: no-repeat;
background-size: 1.5EM 1EM;
background-position: right center;
margin-bottom: 20px;
}
.tv-options-container, .cooker-options-container{
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<h1>Add appliance</h1>
<p>Please provide the details for the appliance</p>
<form action="">
<fieldset style="border:none">
<label for="appliance-type">Appliance type:</label>
<select onchange="show(value)" name="appliance-type" id="appliance-type">
<option value="" selected disabled>Choose appliance</option>
<option value="tv">TV</option>
<option value="cooker">Cooker</option>
</select>
<!-- style="display:none;" -->
<div id="tv">
<label for="manufacturer">Manufacturer:  </label>
<select name="tv-manufacturer" id="tv-manufacturer">
<option value="" selected disabled> </option>
<option value="narkasse">Narkasse </option>
</select>
<br>
<label for="model-name">Model Name</label>
<input type="text" name="model-name" id="model-name">
<br>
<hr>
<label for="">Display Type</label>
<select name="" id="">
<option value="" selected disabled> </option>
<option value="display-type">LED</option>
</select>
</div>
<div style="display:none;" id="cooker">
<p>cooker</p>
<p>cooker</p>
<p>cooker</p>
</div>
</fieldset>
</form>
</main>
</body>
</html>