Select cliquable

Bonjour,

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

  1. salut,
    c'est une bonne idée, quelle est ta question ?

    (¯'·.¸¸.·'¯'·.¸¸.-> <-.¸¸.·'¯'·.¸¸.·'¯)
    1. 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
      1. 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>
        
        


        1. merci, mais là on dit ds js de cliker france et paris donc si je cliques sur maroc là ca ne marche pas
          1. ben oui mais j'ai juste fait un exemple avec ce que tu as donné, il faut le compléter maintenant
        2. merci, je vais prendre un autre exemple qui sera la même chose

          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
          1. ben oui mais là tu me demande de te faire ton code. En fait tu met en display: none; tout tes select et avec l'évenement onchange tu les fait apparaître suivant ce qui est sélectionné.
        3. j'ai fais mais ça n'apparaît pas l'autre select

          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
          1. 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>