IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

option du select qui modifie la liste des options


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Juin 2006
    Messages : 49
    Points : 33
    Points
    33
    Par défaut option du select qui modifie la liste des options
    Bonjour à tous et à toutes ! Je me résous finalement à poster ici après avoir chercher ce que je voulais et que je n'arrivais pas à faire. À part modifier des scripts, je ne sais pas en faire moi même. Il y a une chose probablement simple à faire que j'aimerais avoir, mais je ne trouve pas exactement ce que je veux (je cherche surement pas au bon endroit!!).
    Je cherche à créer une liste <select> qui contient le nom de quelques pays de base seulement, et dans la liste il y aurait une option "Plus de pays" qui changerait complètement la liste du <select> pour un autre liste plus longue de pays... si vous voyez ce que je veux dire.
    Cela doit être simple à faire, c'est pour cette raison que je demandes ici votre aide, et je remercie d'avance tout ceux qui m'aideront pour ceci!!

  2. #2
    Membre du Club
    Profil pro
    Développeur Web
    Inscrit en
    Avril 2010
    Messages
    36
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2010
    Messages : 36
    Points : 48
    Points
    48
    Par défaut
    Salut,

    Tu as 2 solutions, soit avec AJAX soit avec deux select différents.

    Je m'explique, tu crée 2 selects un avec la liste réduite et l'autre avec la liste de tous les pays. Tu cache celui dont tu n'as pas besoin en lui ajoutant style="display: none". Après avec un simple javascript tu changes la visibilité avec un onclick sur le "plus de pays" ou le "moins de pays" en mettant style="display: block".

    Je pense que la deuxième solutions est plus adapté étant donné que tu n'as pas trop l'habitude de codé javascript

  3. #3
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Juin 2006
    Messages : 49
    Points : 33
    Points
    33
    Par défaut
    ha oui merci pour la suggestion la deuxième me semble effectivement la meilleure pour moi c'est celle que je vais utiliser je me débrouille beaucoup mieux en php et avec les feuilles de style,
    avec ce que tu m'as dis je saurai surement me débrouiller en cherchant un peu par contre sur google à me renseigner pour le display: block dit en javascript ..

  4. #4
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Juin 2006
    Messages : 49
    Points : 33
    Points
    33
    Par défaut
    Salut, j'ai trouvé finalement plus ou moins ce que je cherchais, avec ce principe dont tu parlais badajoz (display: block). Ca fonctionne bien comme ceci

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
     
    <script type="text/javascript">
    function changeMenu(sel){ldelim}
    var f = sel.form;
    var opt = sel.options[sel.selectedIndex].value;
    if(opt=="country")
    {ldelim}
    f.elements["lookcountry"].style.display = "inline";
    f.elements["looklesscountry"].style.display = "none";
    {rdelim}
    else if(opt=="lesscountry")
    {ldelim}
    f.elements["looklesscountry"].style.display = "inline";
    f.elements["lookcountry"].style.display = "none";
    {rdelim}
    return true;
    {rdelim}
    </script>
     
    <select class="searchselect" name="looklesscountry" style='width: 100px;' onChange="simplesearchZip(this.value);return changeMenu(this);">
    	<option label="All Countries" value="AA">All Countries</option>
    	<option label="Canada" value="CA" selected="selected">Canada</option>
    	<option label="Belgium" value="BE">Belgique</option>
    	<option label="France" value="FR">France</option>
    	<option label="Switzerland" value="CH">Suisse</option>
    	<option value="country">Plus de pays</option>
    </select>
    <select class="searchselect" name="lookcountry" style='width: 100px; display:none;' onChange="simplesearchZip(this.value);return changeMenu(this);">
    	<option value="lesscountry">Moins de pays</option>
    	{html_options options=$lang.allcountries selected=$simplesearch.lookcountry }
    </select>

    Cependant, j'ai un autre problème je ne sais pas trop comment je pourrais dire au php dans le formulaire qu'il doit prendre le pays sélectionné de la liste visible, et pas celle non-visible..

    $country = isset($_REQUEST['lookcountry'])?$_REQUEST['lookcountry']:'AA';

    si vous avez une solution, en javascript ou autre.. je vous en serais vraiment très reconnaissant!

  5. #5
    Membre du Club
    Profil pro
    Développeur Web
    Inscrit en
    Avril 2010
    Messages
    36
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2010
    Messages : 36
    Points : 48
    Points
    48
    Par défaut
    Salut,

    Il va falloir faire un petit bric a brac, au lieu de sélectionner tes éléments par leur nom séléctionne les avec un ID et change le nom de celui qui est actif en lui ajoutant par exemple lesscountry-visible, comme sa tu teste en php avec un isset($_POST['lesscountry-visible']).

    C'est pas joli joli mais c'est la seule solutions qui me vient a l'esprit pour le moment.

  6. #6
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Juin 2006
    Messages : 49
    Points : 33
    Points
    33
    Par défaut
    Salut,
    Merci de ta réponse, j'essaie de faire comme tu me suggères de faire, mais j'ai un peu de mal je suis pas sure que le ID se modifie comme il faut j'ai une erreur javascript...
    quand on indique ceci: document.getElementById("lookmorecountry-inline").value = Nouvelle Valeur!! C'est bien la valeur ID ici qui est modifié?

    Voila ou je suis rendu...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
     
    <script type="text/javascript">
    	function changeMenu(sel){ldelim}
    var f = sel.form;
    var opt = sel.options[sel.selectedIndex].value;
    if(opt=="country")
    {ldelim}
    f.elements["looklesscountry"].style.display = "none";
    f.elements["lookmorecountry"].style.display = "inline";
    document.getElementById("looklesscountry-inline").value = "looklesscountry-none";
    document.getElementById("lookmorecountry-none").value = "lookmorecountry-inline";
    {rdelim}
    else if(opt=="lesscountry")
    {ldelim}
    f.elements["looklesscountry"].style.display = "inline";
    f.elements["lookmorecountry"].style.display = "none";
    document.getElementById("looklesscountry-none").value = "looklesscountry-inline";
    document.getElementById("lookmorecountry-inline").value = "lookmorecountry-none";
    {rdelim}
    return true;
    {rdelim}
    </script>
     
    <tr><td class="man">{lang mkey='country'}:</td></tr>
    <tr><td class="select">
    	<select class="searchselect" name="looklesscountry" id="looklesscountry-inline" style='width: 100px;' onChange="simplesearchZip(this.value);return changeMenu(this);">
    		<option label="All Countries" value="AA">All Countries</option>
    		<option label="Canada" value="CA" selected="selected">Canada</option>
    		<option label="Belgium" value="BE">Belgique</option>
    		<option label="France" value="FR">France</option>
    		<option label="Switzerland" value="CH">Suisse</option>
    		<option value="country">Plus de pays</option>
                </select>
    	<select class="searchselect" name="lookmorecountry" id="lookmorecountry-none" style='width: 100px; display:none;' onChange="simplesearchZip(this.value);return changeMenu(this);">
    	  		<option value="lesscountry">Moins de pays</option>
    			{html_options options=$lang.allcountries selected=$simplesearch.lookcountry }
            </select>
        </td></tr>

  7. #7
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Juin 2006
    Messages : 49
    Points : 33
    Points
    33
    Par défaut
    ah je t'avais pas bien compris mais la j'ai compris et j'ai réussis à faire marcher le scripte en essayant au piff!

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
     
     <script type="text/javascript">
    	function changeMenu(sel){ldelim}
    var f = sel.form;
    var opt = sel.options[sel.selectedIndex].value;
    if(opt=="country")
    {ldelim}
    document.getElementById("looklesscountry").style.display = "none";
    document.getElementById("lookmorecountry").style.display = "inline";
    document.getElementById("looklesscountry").name = "looklesscountry-none";
    document.getElementById("lookmorecountry").name = "lookmorecountry-inline";
    {rdelim}
    else if(opt=="lesscountry")
    {ldelim}
    document.getElementById("looklesscountry").style.display = "inline";
    document.getElementById("lookmorecountry").style.display = "none";
    document.getElementById("looklesscountry").name = "looklesscountry-inline";
    document.getElementById("lookmorecountry").name = "lookmorecountry-none";
    {rdelim}
    return true;
    {rdelim}
    </script>
     
     
    <input type="text" size="10" name="optionphrase" id="textbox" style="display:none">
     
    <select name="genreSelectName" style="display:none">
    <option value="thriller">Thriller</option>
    <option value="action">Action</option>
    </select>
     
    	<tr><td class="man">{lang mkey='country'}:</td></tr>
    	<tr><td class="select">
    		<select class="searchselect" name="looklesscountry-inline" id="looklesscountry" style='width: 100px;' onChange="simplesearchZip(this.value);return changeMenu(this);">
    			<option label="All Countries" value="AA">All Countries</option>
    			<option label="Canada" value="CA" selected="selected">Canada</option>
    			<option label="Belgium" value="BE">Belgique</option>
    			<option label="France" value="FR">France</option>
    			<option label="Switzerland" value="CH">Suisse</option>
    			<option value="country">Plus de pays</option>
            </select>
    		<select class="searchselect" name="lookmorecountry-none" id="lookmorecountry" style='width: 100px; display:none;' onChange="simplesearchZip(this.value);return changeMenu(this);">
    	  		<option value="lesscountry">Moins de pays</option>
    			{html_options options=$lang.allcountries selected=$simplesearch.lookcountry }
            </select>
        </td></tr>
     
     
    if(isset($_REQUEST['lookmorecountry-inline']))
    	$country = isset($_REQUEST['lookmorecountry-inline'])?$_REQUEST['lookmorecountry-inline']:'AA';
    else if(isset($_REQUEST['looklesscountry-inline']))
    	$country = isset($_REQUEST['looklesscountry-inline'])?$_REQUEST['looklesscountry-inline']:'AA';
    else
    	$country='AA';
    Merci pour ton aide et de m'avoir mit sur la bonne voie

Discussions similaires

  1. Commade qui donne la liste des ports
    Par youcef81 dans le forum Administration système
    Réponses: 2
    Dernier message: 16/11/2007, 20h01
  2. conserver l'etat des options de select multiple apres le submit
    Par raul_le_vieux dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 25/07/2007, 15h41
  3. [SQL] Contrôle "Select" et liste des options
    Par Cantalou dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 02/12/2006, 20h31
  4. [VB.NET]API qui récupère la liste des utilisateurs connectés
    Par cedric.synix dans le forum Windows Forms
    Réponses: 2
    Dernier message: 07/07/2006, 00h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo