 |
| | | | | | | | | 1. Redirections avec les listes déroulantes
| | | |
|
De temps en temps, on souhaite pouvoir mettre de nombreux liens dans une page, mais sur peu de place, très peu de place. Dans ce cas,
les redirections avec les listes déroulantes peuvent être très pratique.
Voici un exemple
| | | | | | | | | 1. 1. Source et Explication
| | | |
|
Le source de cet exemple est le suivant :
<form name="exemple" method="get">
<select name="goto" size="1" OnChange="if (this.options[this.selectedIndex].value)
location.href=this.options[this.selectedIndex].value">
<option value="http://www.hobbesworld.com">Accueil
<option value="./index.php">Présentation du javascript
</select>
</form>
Explication a_venir
| | | | | | | | | 2. Modification lors d'un clic
| | | |
|
| | | | | | | | | 2. 1. Ajout dans un autre champs
| | | |
|
Voici un exemple qui va mettre le texte selectionné dans la liste à la place des autres champs
| | | | | | | | | 2.1.1.1. Source et Explication
| | | |
|
Le source de cet exemple est le suivant :
<form name="exemplelist1" method="get">
<input name="monnom"><br>
<select name="goto" size="1" onchange="monnom.value = this.options[this.selectedindex].value">
<option value="http://www.hobbesworld.com">accueil
<option value="./index.php">présentation du javascript
</select>
</form>
Explication a_venir
| | | | | | | | | 2.1.2. Methode avec Fonction
| | | |
|
| | | | | | | | | 2.1.2.1. Source et Explication
| | | |
|
Le source de cet exemple est le suivant :
<script>
function modifText() {
document.exemplelist2.monNom.value = document.exemplelist2.gotoForm.value;
}
</script>
<form name="exemplelist1" method="get">
<input name="monnom"><br>
<select name="gotoForm" size="1" onchange="monnom.value = this.options[this.selectedindex].value">
<option value="http://www.hobbesworld.com">accueil
<option value="./index.php">présentation du javascript
</select>
</form>
| | | | | | | | | 2. 2. Modification d'une autre liste
| | | |
|
| | | | | | | | | 2.2.1. Source et Explication
| | | |
|
<script language="JavaScript">
function moveItem1To2 () {
var i1 = document.testForm.list1.selectedIndex;
var text1 = document.testForm.list1.options[i1].text;
var value1 = document.testForm.list1.options[i1].value;
var list2 = document.testForm.list2;
list2.options[list2.options.length]= new Option(text1 ,value1);
document.testForm.list1.remove(i1);
}
function moveItem2To1 () {
var text1 = document.testForm.list2.options[document.testForm.list2.selectedIndex].text;
var value1 = document.testForm.list2.options[document.testForm.list2.selectedIndex].value;
var list1 = document.testForm.list1;
list1.options[list1.options.length]= new Option(text1,value1);
document.testForm.list2.remove(document.testForm.list2.selectedIndex);
}
</script>
<form name="testForm">
<select name="list1" onChange="moveItem1To2()" size=5>
<script language="javascript">
var list1 = document.testForm.list1;
list1.options[list1.options.length] = new Option('Pomme','P1');
list1.options[list1.options.length] = new Option('Poire','P2');
list1.options[list1.options.length] = new Option('Peche','P3');
list1.options[list1.options.length] = new Option('Poivre','P4');
list1.options[list1.options.length] = new Option('Prune','P5');
list1.options[list1.options.length] = new Option('Abricot','A1');
</script>
</select>
<select name="list2" onChange="moveItem2To1()" size=5>
<option value="1">Pomme
</select>
</form>
|
