Select cliquable

titiririgole -  
 Utilisateur anonyme -
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. Utilisateur anonyme
     
    salut,
    c'est une bonne idée, quelle est ta question ?

    (¯'·.¸¸.·'¯'·.¸¸.-> <-.¸¸.·'¯'·.¸¸.·'¯)
    0
  2. titiririgole
     
    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
    0
  3. Utilisateur anonyme
     
    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>
    
    


    0
  4. titiririgole
     
    merci, mais là on dit ds js de cliker france et paris donc si je cliques sur maroc là ca ne marche pas
    0
    1. Utilisateur anonyme
       
      ben oui mais j'ai juste fait un exemple avec ce que tu as donné, il faut le compléter maintenant
      0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. titiririgole
     
    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
    0
    1. Utilisateur anonyme
       
      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é.
      0
  7. titiririgole
     
    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
    0
  8. Utilisateur anonyme
     
    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>
    
    

    0