[Résolu] Identification entre 2 options

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)