【发布时间】：2022-11-22 14:12:19
【问题描述】：
如果您选择“tv”选项，它会显示一个 div，如果您选择“cooker”选项，它会显示一个不同的 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."我的代码虽然不起作用。
感谢任何有帮助的人。
代码：
<!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)" class="options" 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 class="tv-options-container" id="tv">
<label for="manufacturer">Manufacturer:  </label>
<select class="options" 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 class="option" name="" id="">
<option value="" selected disabled> </option>
<option value="display-type">LED</option>
</select>
</div>
<div class="cooker-options-container" style="display:none;" id="cooker">
<p>cooker</p>
<p>cooker</p>
<p>cooker</p>
</div>
</fieldset>
</form>
</main>
</body>
</html>
CSS 代码：
*{
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,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='11' fill='lightblue'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
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代码：
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;
}
【问题讨论】：
标签： javascript html css