Select cliquable
titiririgole
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
j'ai par exemple 3 selects
donc si un membre habite 2 er arrondissement
il devra clicker France
et là l'autre sélect apparaît
ensuite il clique sur paris
ensuite il vera un autre selecte et là
il selectione 2 eme arrondisement
j'ai par exemple 3 selects
<select name="departement" id="departement">
<option value="Pay">Pay</option>
<option value="Pay">france</option>
<option value="Pay">maroc</option>
</select>
<select name="region" id="region">
<option value="paris">paris</option>
<option value="val de marne">val de marne</option>
<option value="etc...">etc...</option>
</select>
<select name="ville" id="ville">
<option value="1 er arrondissement">1 er arrondissement</option>
<option value="2 er arrondissement">2 er arrondissement</option>
<option value="etc...">etc...</option>
</select>
donc si un membre habite 2 er arrondissement
il devra clicker France
et là l'autre sélect apparaît
ensuite il clique sur paris
ensuite il vera un autre selecte et là
il selectione 2 eme arrondisement
7 réponses
comment mettre un code pour éffacer les 2 selecte
et si tu clique sur le selet pay
tu clik sur paris
et là tu verra un autre selcte avec la region
iles de france picardi etc...
et si tu choisit ile de france tu verra un autre select
val d'oise vl demane
et si tu clique sur val de marne là tu vera les vile de val de marne
et si tu clique sur le selet pay
tu clik sur paris
et là tu verra un autre selcte avec la region
iles de france picardi etc...
et si tu choisit ile de france tu verra un autre select
val d'oise vl demane
et si tu clique sur val de marne là tu vera les vile de val de marne
jet'ai fait un exemple qu'il faudra adapter et surtout compléter
<form id="form">
<select name="departement" id="departement">
<option value="Pay">Pay</option>
<option value="france">france</option>
<option value="maroc">maroc</option>
</select>
<select name="region" id="region" style="display: none">
<option value="paris">paris</option>
<option value="val de marne">val de marne</option>
<option value="etc...">etc...</option>
</select>
<select name="ville" id="ville" style="display: none">
<option value="1 er arrondissement">1 er arrondissement</option>
<option value="2 er arrondissement">2 er arrondissement</option>
<option value="etc...">etc...</option>
</select>
</form>
<script type="text/javascript">
var form = document.getElementById("form");
var sel = form.getElementsByTagName("select");
sel[0].onchange = function() {
if (this.value == "france") {
sel[1].style.display="block";
}
}
sel[1].onchange = function() {
if (this.value == "paris") {
sel[2].style.display="block";
}
}
sel[2].onchange = function() {
alert(this.value);
}
</script>
merci, mais là on dit ds js de cliker france et paris donc si je cliques sur maroc là ca ne marche pas
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
merci, je vais prendre un autre exemple qui sera la même chose
j'ai fait une table sql
et ma fonction qui vas recupere le non boire un verre , cinema
voilà la fonction
c bon il m'affiche bien le selecte en mettant boire un vere, cinema restaurant etc..
donc a partir de ce code
comment je ferais pour selectioné
exemple
tu veux faire un cinema
tu cliquera sur cinéma et là tu verra un autre selecte qui est a rapport cinema
tu clique sur cinema et ensuite on verra un autre select avec comedi, frisson etc..
bien entendu je mettrais ds ma table un champs que je nommerais genre
et on vera le select afficher avec tout les genre
et si tu selectionne restaurant tu veras chinois marocain japonnais italien
apartir de mon code
es ce que tu pourrais me faire le javasscriptqui vas detecter les mot
merci
j'ai fait une table sql
-- phpMyAdmin SQL Dump
-- version 4.0.8
-- http://www.phpmyadmin.net
--
-- Client: localhost
-- Généré le: Ven 03 Janvier 2014 à 14:14
-- Version du serveur: 5.5.31-1~dotdeb.0-log
-- Version de PHP: 5.4.21-1~dotdeb.0
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Base de données: 'monsite'
--
-- --------------------------------------------------------
--
-- Structure de la table 'activiter_type'
--
CREATE TABLE IF NOT EXISTS 'activiter_type' (
'id' int(11) NOT NULL AUTO_INCREMENT,
'value' varchar(50) DEFAULT NULL,
PRIMARY KEY ('id'),
KEY 'id' ('id')
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=240 ;
--
-- Contenu de la table 'activiter_type'
--
INSERT INTO 'activiter_type' ('id', 'value') VALUES
(1, 'Boire un verre'),
(2, 'Restaurant'),
(3, 'Cinéma'),
(4, 'Sport'),
(5, 'Jeux');
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
et ma fonction qui vas recupere le non boire un verre , cinema
voilà la fonction
function GetTypeSortie()
{
global $pdo;
$stateArr = $pdo->query('SELECT id, value, genre FROM activiter_type');
$str = '<select name="typeSortie" id="typeSortie">
<option value="">Votre type de sortie</option>';
foreach($stateArr as $state)
{
$str .= '<option value='.$state[0];
if(@$data['membre_activiter_type'] == $state[0])
$str .= ' selected';
$str .= '>'.utf8_decode($state[1]).'</option>';
}
return $str .= '</select>';
}
c bon il m'affiche bien le selecte en mettant boire un vere, cinema restaurant etc..
donc a partir de ce code
comment je ferais pour selectioné
exemple
tu veux faire un cinema
tu cliquera sur cinéma et là tu verra un autre selecte qui est a rapport cinema
tu clique sur cinema et ensuite on verra un autre select avec comedi, frisson etc..
bien entendu je mettrais ds ma table un champs que je nommerais genre
et on vera le select afficher avec tout les genre
et si tu selectionne restaurant tu veras chinois marocain japonnais italien
apartir de mon code
es ce que tu pourrais me faire le javasscriptqui vas detecter les mot
merci
j'ai fais mais ça n'apparaît pas l'autre select
merci
function GetTypeSortie()
{
global $pdo;
$stateArr = $pdo->query('SELECT id, value, genre FROM activiter_type');
$str = '<select name="typeSortie" id="typeSortie">
<option value="">Votre type de sortie</option>';
foreach($stateArr as $state)
{
$str .= '<option value='.$state[0];
if(@$data['membre_activiter_type'] == $state[0])
$str .= ' selected';
$str .= '>'.utf8_decode($state[1]).'</option>';
}
return $str .= '</select>';
$str = '<select name="typeSortie" id="typeSortie" style="display: none">
<option value="">Genre</option>';
foreach($stateArr as $state)
{
$str .= '<option genre='.$state[0];
if(@$data['membre_activiter_type'] == $state[0])
$str .= ' selected';
$str .= '>'.utf8_decode($state[1]).'</option>';
}
return $str .= '</select>';
$strPage .='<script type="text/javascript">
var form = document.getElementById("form");
var sel = form.getElementsByTagName("select");
sel[0].onchange = function() {
if (this.value == "typeSortie") {
sel[1].style.display="block";
}
}
sel[1].onchange = function() {
if (this.value == "typeSortie") {
sel[2].style.display="block";
}
}
sel[2].onchange = function() {
alert(this.value);
}
</script>';
}
merci
salut, je t'ai fait un exemple plutot verbeux, mais facile à comprendre. Tu pourras mieux l'adapter
<form id="form">
<select>
<option value="choix">faites un choix</option>
<option value="boire">boire</option>
<option value="manger">manger</option>
</select>
<select style="display: none;">
<option value="choix">faites un choix</option>
<option value="alcool">alcool</option>
<option value="sans-alcool">sans-alccol</option>
</select>
<select style="display: none;">
<option value="choix">faites un choix</option>
<option value="bierre">bierre</option>
<option value="wisky">wisky</option>
<option value="vodka">vodka</option>
</select>
<select style="display: none;">
<option value="choix">faites un choix</option>
<option value="coca">coca</option>
<option value="perrier">perrier</option>
<option value="orangina">orangina</option>
</select>
<select style="display: none;">
<option value="choix">faites un choix</option>
<option value="chauds">chauds</option>
<option value="froids">froids</option>
</select>
<select style="display: none;">
<option value="choix">faites un choix</option>
<option value="lasagne">lasagne</option>
<option value="boeuf">boeuf</option>
<option value="legume">legume</option>
</select>
<select style="display: none;">
<option value="choix">faites un choix</option>
<option value="salade">salade</option>
<option value="fromage">fromage</option>
</select>
</form>
<script type="text/javascript">
var form = document.getElementById("form");
var sel = form.getElementsByTagName("select");
sel[0].onchange = function() {
if (this.value == "boire") {
sel[1].style.display = "block";
sel[2].style.display = "none";
sel[3].style.display = "none";
sel[4].style.display = "none";
sel[5].style.display = "none";
sel[6].style.display = "none";
} else if (this.value == "manger") {
sel[1].style.display = "none";
sel[2].style.display = "none";
sel[3].style.display = "none";
sel[4].style.display = "block";
sel[5].style.display = "none";
sel[6].style.display = "none";
} else {
return false;
}
}
sel[1].onchange = function() {
if (this.value == "alcool") {
sel[2].style.display = "block";
sel[3].style.display = "none";
sel[4].style.display = "none";
sel[5].style.display = "none";
sel[6].style.display = "none";
} else if (this.value == "sans-alcool") {
sel[2].style.display = "none";
sel[3].style.display = "block";
sel[4].style.display = "none";
sel[5].style.display = "none";
sel[6].style.display = "none";
} else {
return false;
}
}
sel[4].onchange = function() {
if (this.value == "chauds") {
sel[2].style.display = "none";
sel[3].style.display = "none";
sel[1].style.display = "none";
sel[5].style.display = "block";
sel[6].style.display = "none";
} else if (this.value == "froids") {
sel[2].style.display = "none";
sel[3].style.display = "none";
sel[1].style.display = "none";
sel[5].style.display = "none";
sel[6].style.display = "block";
} else {
return false;
}
}
</script>