option du select qui modifie la liste des options

Version imprimable

10/04/2010, 19h46
beru333

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!!
11/04/2010, 20h01
badajoz

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
11/04/2010, 23h27
beru333

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 ..8-)

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:

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!

12/04/2010, 20h06
badajoz

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.

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:

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>

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! 8-)

Code:

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 :P