Select option in sequence - php

Question

I was wondering if you could help me with a problem that I’m having in realizing my business’ website.
As you can see in my code I already created 6 select options, but I want to make sure that the second select option (and then the third etc.) appears only when I put a value on the first select option and I don’t know how to do it right now.
Here is my code:
<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>
This is the code of the 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

As you have not added any Javascript we do not know what the function Canotto actually does - does it send an ajax request, do a lookup in an array/json, create content dynamically or other! So - with a minor tweak to the HTMl so that each select menu has a unique dataset attribute - data-id you can look ahead/behind using a couple of simple sibling selector type functions ( findnextselect and findpreviousselect ) to identify the next/previous select menus and set a display property on these found nodes.
Perhaps it'll give an idea how to proceed
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

Here is what I believe you are looking for. After each canotto1 is clicked, conotto2 is opened and so on.
The code lacked IDS and there were many unecessary element such as onchange. The styling was bad, I used an ID to pass the styling to each that had that ID.
If you had a clean code, the javascript could have been much shorter and not repeated and you could even use jQuery.
But the code below get the job done.
Tested and works.
<!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>