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

Utilisateur anonyme
 
salut,
c'est une bonne idée, quelle est ta question ?

(¯'·.¸¸.·'¯'·.¸¸.-> <-.¸¸.·'¯'·.¸¸.·'¯)
0
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
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
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
Utilisateur anonyme
 
ben oui mais j'ai juste fait un exemple avec ce que tu as donné, il faut le compléter maintenant
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
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
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
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
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