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

  • Votes
  • Date
  • Date décroissante
  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>
    
    

    1. 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. 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é.
      2. 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
      3. 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. 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. salut,
            c'est une bonne idée, quelle est ta question ?

            (¯'·.¸¸.·'¯'·.¸¸.-> <-.¸¸.·'¯'·.¸¸.·'¯)