[Résolu] Identification entre 2 options

Bonsoir, quelqu'un aurait une idée de comment faire en sorte que une fois mon choix1 fait, il influence sur ce que j'ai dans choix2 ?
Mon code est loin d'être parfait j'en ai conscience.

[EDIT]

<form method="post" name="formulaire" class="formulairePourBDEtudiant" onreset="return send()">
	<h2>Informations</h2>
	<label><b>Requête : </b></label><br>
	<div>
		SELECT <input type="hidden" value="SELECT" >
		<input list="choix1" class="stylechoix" placeholder="Élement à afficher">
		<datalist id="choix1">
			<option value="*">
			<option value="price">
			<option value="description">
			<option value="name">
		</datalist> 
		FROM products <input type="hidden" value="FROM products">
		<input list="choix2" class="stylechoix" placeholder="Conditions à ajouter">
		<datalist id="choix2">
			<option value="WHERE price>1000">
			<option value="WHERE price<1000">
			<option value="WHERE price>500">
			<option value="WHERE price>100">
			<option value="ORDER BY description DESC LIMIT 1">
			<option value="ORDER BY description ASC LIMIT 1">
			<option value="WHERE name LIKE 'Samsung%'">
			<option value="WHERE name LIKE 'LG%'">
			<option value="WHERE name LIKE 'Lenovo%'">
			<option value="WHERE name LIKE 'Sony%'">
			<option value="WHERE name LIKE 'Huawei%'">
		</datalist>
		; <input type="hidden" value=";"><br>
	</div>
	<input value="Envoyer" type="submit" name="submit" /> <input value="Réinitialiser" type="reset" name="reset" />
</form>

Modifié par Gaara-ara (30 Nov 2022 - 12:42)

Bonjour,

1 - Pourquoi ne pas utiliser la balise <select> pour faire un choix ?
2 - Comment la liste 1 est censée influencer la liste 2 ?

Si je prend
<option id="price" value="price">

Alors mes choix possibles seront:
<option for="id='price'" value="WHERE price>1000">
<option for="id='price'" value="WHERE price<1000">
<option for="id='price'" value="WHERE price>500">
<option for="id='price'" value="WHERE price>100">

[EDIT]
Modifié par Gaara-ara (30 Nov 2022 - 12:45)

J'ai commencé avec ceci : https://jsfiddle.net/1tzgpqLv/

Je vais continuer après, si j'ai le temps.

Ca servira pour l'autre problème également. Il faut revoir la structure html pour récupérer toutes les valeurs d'un coup. Par contre, je ne suis pas expert php. Je pense qu'il faudrait créér des fichiers .php pour dynamiser la valeur des options dans la balise select.

Exemple ici: https://stackoverflow.com/questions/36919217/conditionally-showing-html-without-wrapping-it-in-a-php-echo-statement

je tiens vraiment a ce que ca ressemble a ça...
Et pour reprendre ce que j'ai dit, ce que je veux c'est une datalist avec des options conditionnel

body {
    background-color: white;
	background-image: url("../Ressources/FondEcran.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
    height: 100%;
}

#cont {
    width: 52%;
    margin: auto;
    margin-top: 2%;
}

.parametre{
	width: 5%;
	display: block;
}

details{
	background-color: white;
    border: 1px solid black;
	border-radius: 10px;
	margin: 1% auto 2% auto ;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

summary {
	text-align: center;
	width: 100%;
	cursor: pointer;
    margin: -.5em -.5em 0 0;
    padding: 2% 0% 1% 0%;
}

details[open] summary {
    border-bottom: 1px solid black;
    margin-bottom: .5em;
}

form {
    width: 85%;
    padding: 3%;
	margin: 2% auto 2% auto ;
    border: 1px #f1f1f1;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

div {
	width: 100%;
}

#cont h2 {
    text-align: center;
    margin: 0 auto;
    padding-bottom: 10px;
}

article {
	width: 100%;
	margin: 1%;
	text-align: center;
    border: 1px #f1f1f1;
}

input[class="stylechoix"] {
	border: 1px solid black;
	border-radius: 10px;
	text-align: center;
	margin: 4% 0;
}

input[type=text] {
    width: 95%;
    padding: 1%;
    margin: 4% 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* style des boutons */

@keyframes backgroundrandom {
    0% { background-color: red; } 
    17% { background-color: yellow; } 
    35% { background-color: green; } 
    50% { background-color: blue; }
    65% { background-color: violet; } 
	85% { background-color: orange; }
	100% { background-color: red; }
}
@keyframes borderrandom {
    0% { border: 1px solid red; } 
    17% { border: 1px solid yellow; } 
    35% { border: 1px solid green; } 
    50% { border: 1px solid blue; }
    65% { border: 1px solid violet; } 
	85% { border: 1px solid orange; }
	100% { border: 1px solid red; }
}
@keyframes colorrandom {
    0% { color: red; } 
    17% { color: yellow; } 
    35% { color: green; } 
    50% { color: blue; }
    65% { color: violet; } 
	85% { color: orange; }
	100% { color: red; }
}

input[class="requete_random"] {
	background-color: white;
	color: white;
	animation: backgroundrandom 3s infinite;
    padding: 7px 10px;
    margin: 8px 0;
    cursor: pointer;
    width: 35%;
	border-radius: 10px;
}

input[class="requete_random"]:hover {
    background-color: white;
	animation: backgroundrandom paused, borderrandom 3s infinite, colorrandom 3s infinite;
	width:35%;
	border-radius: 10px;
}

input[name="submit"] {
    background-color: #53af57;
	border: 1px solid #53af57;
    color: white ;
    padding: 14px 20px;
    margin: 1% 0;
    cursor: pointer;
    width: 49%;
	box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
	transition: all .5s;
}

input[name="submit"]:hover {
    background-color: #53af57;
    color: white;
    border: 1px solid #53af57;
	box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}

input[name="reset"] {
    background-color: #f00020;
	border: 1px solid #f00020;
    color: white;
    padding: 14px 20px;
    margin: 1% 0;
    cursor: pointer;
    width: 49%;
	box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
	transition: all .5s;
}

input[name="reset"]:hover {
    background-color: #f00020;
    color: white;
    border: 1px solid #f00020;
	box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/*   ~~~~~~~~~~~~~~    */

table, th, td {
	border: 1px solid black;
	background-color: white;
}

Modifié par Gaara-ara (30 Nov 2022 - 12:49)

Je laisse tomber.