按顺序选择选项

Question

我想知道你是否可以帮助我解决我在实现企业网站时遇到的问题。正如你在我的代码中看到的那样，我已经创建了6个选择选项，但我想确保只有当我在第一个选择选项上加了一个值时，第二个选择选项(然后是第三个等等(才会出现，我现在不知道该怎么做。这是我的代码：

<div class="case-item">
<div class="container">
<h2 class="title title--h3">I tuoi canotti</h2>
<br>

<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md">
<select name="users" id="canotto1" onchange="Canotto(this.value,'Canotto1');">
<?php echo $opt->Canotti(); ?>
</select>
</div>
<div class="col-md-1">
<a  
style="
background-color: #cc0000;
border-radius: 10px;
border: 0;
color: #fff;
cursor: pointer;
font-size: 0.8rem;
font-weight: 400;
line-height: inherit;
text-transform:uppercase;
overflow: hidden;
padding: 0.4rem 0.6rem;
position: relative;
transition: .4s ease-in-out;
white-space: nowrap;
z-index: 1;" 
onclick="EliminaCanotto('Canotto1');">Elimina</a>
</div>
</div>
<br>

<div id="mostra2">
<div class="row">
<div class="col-md">
<select name="users" id="canotto2" onchange="Canotto(this.value,'Canotto2');">
<?php echo $opt->Canotti(); ?>
</select> 
</div>
<div class="col-md-1">
<a  
style="
background-color: #cc0000;
border-radius: 10px;
border: 0;
color: #fff;
cursor: pointer;
font-size: 0.8rem;
font-weight: 400;
line-height: inherit;
text-transform:uppercase;
overflow: hidden;
padding: 0.4rem 0.6rem;
position: relative;
transition: .4s ease-in-out;
white-space: nowrap;
z-index: 1;" 
onclick="EliminaCanotto('Canotto2');">Elimina</a>
</div>
</div>
</div>

<br>
<div class="row">
<div class="col-md">
<select name="users" id="canotto3" onchange="Canotto(this.value,'Canotto3');">
<?php echo $opt->Canotti(); ?>
</select> 
</div>
<div class="col-md-1">
<a  
style="
background-color: #cc0000;
border-radius: 10px;
border: 0;
color: #fff;
cursor: pointer;
font-size: 0.8rem;
font-weight: 400;
line-height: inherit;
text-transform:uppercase;
overflow: hidden;
padding: 0.4rem 0.6rem;
position: relative;
transition: .4s ease-in-out;
white-space: nowrap;
z-index: 1;" 
onclick="EliminaCanotto('Canotto3');">Elimina</a>
</div>
</div>
<br>
<div class="row">
<div class="col-md">
<select name="canotto1" id="canotto4" onchange="Canotto(this.value,'Canotto4');">
<?php echo $opt->Canotti(); ?>
</select>    
</div>
<div class="col-md-1">
<a  
style="
background-color: #cc0000;
border-radius: 10px;
border: 0;
color: #fff;
cursor: pointer;
font-size: 0.8rem;
font-weight: 400;
line-height: inherit;
text-transform:uppercase;
overflow: hidden;
padding: 0.4rem 0.6rem;
position: relative;
transition: .4s ease-in-out;
white-space: nowrap;
z-index: 1;" 
onclick="EliminaCanotto('Canotto4');">Elimina</a>
</div>
</div>
<br>
<div class="row">
<div class="col-md">
<select name="canotto5" id="canotto5" onchange="Canotto(this.value,'Canotto5');">
<?php echo $opt->Canotti(); ?>
</select>    
</div>
<div class="col-md-1">
<a  
style="
background-color: #cc0000;
border-radius: 10px;
border: 0;
color: #fff;
cursor: pointer;
font-size: 0.8rem;
font-weight: 400;
line-height: inherit;
text-transform:uppercase;
overflow: hidden;
padding: 0.4rem 0.6rem;
position: relative;
transition: .4s ease-in-out;
white-space: nowrap;
z-index: 1;" 
onclick="EliminaCanotto('Canotto5');">Elimina</a>
</div>
</div>
<br>
<div class="row">
<div class="col-md">
<select name="canotto6" id="canotto6" onchange="Canotto(this.value,'Canotto6');">
<?php echo $opt->Canotti(); ?>
</select>    
</div>
<div class="col-md-1">
<a  
style="
background-color: #cc0000;
border-radius: 10px;
border: 0;
color: #fff;
cursor: pointer;
font-size: 0.8rem;
font-weight: 400;
line-height: inherit;
text-transform:uppercase;
overflow: hidden;
padding: 0.4rem 0.6rem;
position: relative;
transition: .4s ease-in-out;
white-space: nowrap;
z-index: 1;" 
onclick="EliminaCanotto('Canotto6');">Elimina</a>
</div>
</div>
</div>
<div class="col-sm-1">
</div>
<div class="col-md-7">
<div id="txtHint"></div>
</div>
</div>
</div>      
</div>

这是ajax的代码：<script> function Canotto(str , can) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { var id = <?php echo $_GET['id'] ?>; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET","Plenum_inserimentoCanotti.php?q=" + str + "&id=" + id + "&can=" + can ,true); xmlhttp.send(); } } </script>

Answer 1

由于您没有添加任何Javascript，我们不知道函数Canotto实际做了什么——它是发送ajax请求、在数组/json中查找、动态创建内容还是其他！因此，只需对HTM1进行一个小的调整，使每个select菜单都有一个唯一的dataset属性-data-id，您就可以使用几个简单的sibling selector类型函数(findnextselect和findpreviousselect(来识别下一个/上一个选择菜单，并在这些找到的节点上设置显示属性。

也许它会给出一个如何进行的想法

document.addEventListener('DOMContentLoaded',()=>{
let col=document.querySelectorAll('select.canotto');
const findnextselect=(n,expr)=>{
let s=n.nextElementSibling;
while(s){
if(s.matches(expr))return s;
if(s.tagName.toLowerCase()=='body')return false;
s=s.nextElementSibling;
}
}
const findpreviousselect=(n,expr)=>{
let s=n.previousElementSibling;
while(s){
if(s.matches(expr))return s;
if(s.tagName.toLowerCase()=='body')return false;
s=s.previousElementSibling;
}
}
const changehandler=function(e){
let i=Number(this.dataset.id);
let n=findnextselect(this,'select.canotto');
let p=findpreviousselect(this,'select.canotto');
if( n && Number( n.dataset.id ) >= i )n.classList.add('active');
};
col.forEach(sel=>{
sel.addEventListener('change',changehandler)
})            
})

select.canotto{display:none;padding:0.5rem;margin:0.5rem}
select.canotto:first-child{display:block}
.active{display:block!important}

<select class='canotto' data-id=1 name='users'>
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
<select class='canotto' data-id=2 name='users'>
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
</select>
<select class='canotto' data-id=3 name='users'>
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9     
</select>
<select class='canotto' data-id=4 name='users'>
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9     
</select>

Answer 2

以下是我相信您正在寻找的内容。点击每个canotto1后，打开conotto2，依此类推

该代码缺少IDS，并且有许多不必要的元素，如onchange。样式不好，我用一个ID将样式传递给每个有该ID的人。

如果你有一个干净的代码，javascript可能会更短，不会重复，你甚至可以使用jQuery。

但是下面的代码完成了任务。

经过测试并正常工作

<!DOCTYPE html>
<html>
<head>
<title>Hide Show</title>
</head>

<body>
<style>
#style-select { background-color: #cc0000;
border-radius: 10px;
border: 0;
color: #fff;
cursor: pointer;
font-size: 0.8rem;
font-weight: 400;
line-height: inherit;
text-transform:uppercase;
overflow: hidden;
padding: 0.4rem 0.6rem;
position: relative;
transition: .4s ease-in-out;
white-space: nowrap;
z-index: 1; }
</style>
<div class="case-item">
<div class="container">
<h2 class="title title--h3">I tuoi canotti</h2>
<br>

<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md">
<select name="users" id="canotto1">
<?php echo $opt->Canotti(); ?>
</select>
</div>
<div class="col-md-1">
<a  id="style-select"
onclick="hideShowFeature()">Elimina</a>
</div>
</div>
<br>

<div id="mostra2">
<div class="row">
<div class="col-md">
<select name="users" id="canotto2">
<?php echo $opt->Canotti(); ?>
</select> 
</div>
<div class="col-md-1">
<a  id="style-select"
onclick="hideShowFeature2()">Elimina</a>
</div>
</div>
</div>

<br>
<div class="row" id="mostra3">
<div class="col-md">
<select name="users" id="canotto3">
<?php echo $opt->Canotti(); ?>
</select> 
</div>
<div class="col-md-1">
<a  id="style-select"
onclick="hideShowFeature3()">Elimina</a>
</div>
</div>
<br>
<div class="row" id="mostra4">
<div class="col-md">
<select name="canotto1" id="canotto4" onchange="Canotto(this.value,'Canotto4');">
<?php echo $opt->Canotti(); ?>
</select>    
</div>
<div class="col-md-1" >
<a  id="style-select"
onclick="hideShowFeature4()">Elimina</a>
</div>
</div>
<br>
<div class="row" id="mostra5">
<div class="col-md">
<select name="canotto5" id="canotto5" onchange="Canotto(this.value,'Canotto5');">
<?php echo $opt->Canotti(); ?>
</select>    
</div>
<div class="col-md-1">
<a  id="style-select"
onclick="hideShowFeature5()">Elimina</a>
</div>
</div>
<br>
<div class="row " id="mostra6">
<div class="col-md">
<select name="canotto6" id="canotto6" onchange="Canotto(this.value,'Canotto6');">
<?php echo $opt->Canotti(); ?>
</select>    
</div>
<div class="col-md-1">
<a  id="style-select"
>Elimina</a>
</div>
</div>
</div>
<div class="col-sm-1">
</div>
<div class="col-md-7">
<div id="txtHint"></div>
</div>
</div>
</div>      
</div>
<script type="text/javascript">

function hideShowFeature()  {
if (document.getElementById("canotto1").checked = true) {
document.getElementById("mostra2").style.display = "block";  
document.getElementById("mostra3").style.display = "none"; 
document.getElementById("mostra4").style.display = "none"; 
document.getElementById("mostra5").style.display = "none"; 
document.getElementById("mostra6").style.display = "none";          
}
}   

function hideShowFeature2() {
if (document.getElementById("canotto2").checked = true) {
document.getElementById("mostra2").style.display = "block";  
document.getElementById("mostra3").style.display = "block"; 
document.getElementById("mostra4").style.display = "none"; 
document.getElementById("mostra5").style.display = "none"; 
document.getElementById("mostra6").style.display = "none"; 
} 
}
function hideShowFeature3() {
if (document.getElementById("canotto3").checked = true) {
document.getElementById("mostra2").style.display = "block";  
document.getElementById("mostra3").style.display = "block"; 
document.getElementById("mostra4").style.display = "block"; 
document.getElementById("mostra5").style.display = "none"; 
document.getElementById("mostra6").style.display = "none"; 
} 
}

function hideShowFeature4() {
if (document.getElementById("canotto4").checked = true) {
document.getElementById("mostra2").style.display = "block";  
document.getElementById("mostra3").style.display = "block"; 
document.getElementById("mostra4").style.display = "block"; 
document.getElementById("mostra5").style.display = "block"; 
document.getElementById("mostra6").style.display = "none"; 
} 
}

function hideShowFeature5() {
if (document.getElementById("canotto5").checked = true) {
document.getElementById("mostra2").style.display = "block";  
document.getElementById("mostra3").style.display = "block"; 
document.getElementById("mostra4").style.display = "block"; 
document.getElementById("mostra5").style.display = "block"; 
document.getElementById("mostra6").style.display = "block"; 
} 
}   
</script>   
<style>
#mostra2 {
display:none;
}
#mostra3 {
display:none;
}
#mostra4 {
display:none;
}
#mostra5 {
display:none;
}
#mostra6 {
display:none;
}
</style>
</body>     
</html>