liste deroulante javascript

**keybon** · 01/04/2013, 19h10

Bonjour,

Dans un formulaire, j'ai une liste deroulante de pays et lorsque le pays et usa ou canada, alors une liste d'etats s'affiche.

Voici le code de mon formulaire :

Code html :

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
<form id="form1" action = "execForms.php" method = "POST">
    <table id="table2">
        <tr><th>Add a new client :</th></tr>
        <tr>
            <td>Company Name :</td>
            <td><input type="text" name = "company_name" size = "20" class="required"/></td>
        </tr>
        <tr>
            <td>Address :</td>
            <td><input type="text" name = "address" size = "20" class="required"/></td>
        </tr>
        <tr>
            <td>Country :</td>
            <td><select name="country" id="country" onChange="printStateMenu(this.value);">
                    <option value="select">Select country...</option>
                    <?php foreach($countries as $country){ ?>
                        <option value="<?php echo $country->name; ?>"><?php echo $country->name; ?></option>
                    <?php } ?>
            </select></td>
        </tr>
        <tr>
            <td>State :</td>
            <td id="stateSelect">
                <select name="state" id="state" disabled="disabled">
                        <option value="Other">Select state...</option>
                </select>
            </td>
        </tr>

Et voici le code JS qui traite l'affichage des etats :

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
function printStateMenu(country) {     
	var stateSelect = '';
	if (country == 'United States of America') {
		stateSelect = '<select name="state" id="state" onchange="document.getElementById(\'stateValue\').innerHTML = this.value;"><option value="AK">AK-Alaska</option><option value="AL">AL-Alabama</option><option value="AR">AR-Arkansas</option><option value="AZ">AZ-Arizona</option><option value="CA">CA-California</option><option value="CO">CO-Colorado</option><option value="CT">CT-Connecticut</option><option value="DC">DC-District of Columbia</option><option value="DE">DE-Delaware</option><option value="FL">FL-Florida</option><option value="GA">GA-Georgia</option><option value="HI">HI-Hawaii</option><option value="IA">IA-Iowa</option><option value="ID">ID-Idaho</option><option value="IL">IL-Illinois</option><option value="IN">IN-Indiana</option><option value="KS">KS-Kansas</option><option value="KY">KY-Kentucky</option><option value="LA">LA-Louisiana</option><option value="MA">MA-Massachusetts</option><option value="MD">MD-Maryland</option><option value="ME">ME-Maine</option><option value="MI">MI-Michigan</option><option value="MN">MN-Minnesota</option><option value="MO">MO-Missouri</option><option value="MS">MS-Mississippi</option><option value="MT">MT-Montana</option><option value="NC">NC-North Carolina</option><option value="ND">ND-North Dakota</option><option value="NE">NE-Nebraska</option><option value="NH">NH-New Hampshire</option><option value="NJ">NJ-New Jersey</option><option value="NM">NM-New Mexico</option><option value="NV">NV-Nevada</option><option value="NY">NY-New York</option><option value="OH">OH-Ohio</option><option value="OK">OK-Oklahoma</option><option value="OR">OR-Oregon</option><option value="PA">PA-Pennsylvania</option><option value="RI">RI-Rhode Island</option><option value="SC">SC-South Carolina</option><option value="SD">SD-South Dakota</option><option value="TN">TN-Tennessee</option><option value="TX">TX-Texas</option><option value="UT">UT-Utah</option><option value="VA">VA-Virginia</option><option value="VT">VT-Vermont</option><option value="WA">WA-Washington</option><option value="WI">WI-Wisconsin</option><option value="WV">WV-West Virginia</option><option value="WY">WY-Wyoming</option></select>';
	}
	else if (country == 'Canada') {
		stateSelect = '<select name="state" id="state" onchange="document.getElementById(\'stateValue\').innerHTML = this.value;"><option value="AB">AB-Alberta</option><option value="BC">BC-British Columbia</option><option value="MB">MB-Manitoba</option><option value="NB">NB-New Brunswick</option><option value="NL">NL-Newfoundland and Labrador</option><option value="NT">NT-Northwest Territories</option><option value="NS">NS-Nova Scotia</option><option value="NU">NU-Nunavut</option><option value="ON">ON-Ontario</option><option value="PE">PE-Prince Edward Island</option><option value="QC">QC-Quebec</option><option value="SK">SK-Saskatchewan</option><option value="YT">YT-Yukon</option></select>';
	}
	else {
		stateSelect = '<select name="state" id="state" disabled><option value="Other">Select state...</option></select>';
	}
	document.getElementById('stateSelect').innerHTML = stateSelect;
        if(document.getElementById('countryValue') != null){
            document.getElementById('countryValue').innerHTML = document.getElementById('country').value;
        }
	document.getElementById('stateValue').innerHTML = document.getElementById('state').value;
}
 
 
$(document).ready(function(){
    printStateMenu(country);
});

Mon probleme est lorsque je veux editer ces informations (apres qu'elles aient ete inserees en db).. il faut donc que je recupere l'etat precedemment selectionne, et permettre le changement (ce qui me pose probleme)..
Voici ce que j'ai pr le moment (le chngement de pays marche bien):

Code html :

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
  <form id="form1" action = "execForms.php" method = "POST">
        <table id="table2">
            <tr><th>Edit client :</th></tr>
            <tr>
                 <td><input type="hidden" name = "client_id" value="<?php echo $result->client_id?>"/></td>
            </tr>
            <tr>
                 <td>Company Name :</td>
                 <td><input type="text" name = "company_name" size = "20" class="required" value="<?php echo $result->company_name?>"/></td>
            </tr>
            <tr>
                <td>Address :</td>
                <td><input type="text" name = "address" size = "20" class="required" value="<?php echo $result->address?>"/></td>
            </tr>
            <tr>
		<td>Country :</td>
                    <td><select name="country" id="country" onChange="printStateMenu(this.value);">
                            <option value="<?php echo $result->country?>"><?php echo $result->country?></option>
                            <?php foreach($other_countries as $country){ ?>
                                <option value="<?php echo $country->name?>"><?php echo $country->name?></option>
                            <?php } ?>
                    </select>
                </td>
            </tr>
            <tr>
                <td>State :</td>
                <td id="stateSelect">
                        <select name="state" id="state" disabled="disabled">
                                <option value="Other">Select state...</option>
                        </select>
                </td>
            </tr>

Votre aide me serait vraiment precieuse etant donne que mon niveau en javascript est tres limite

**SpaceFrog** · 01/04/2013, 20h02

c'est coté serveur qu'il faut agi au moment de la création des options du select
en php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php foreach($other_countries as $country){ ?>
    <option value="<?php echo $country->name?>"><?php echo $country->name?></option>
<?php } ?>

Tu devras avoir sauvegardé coté serveur la selection et comparer le value de l'option à la sauvergarde pour rediger un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

selected='selected'

quand il y aura égalité

**keybon** · 10/04/2013, 23h16

Mon probleme est de rediger ca en javascript en fait, la logique je la comprend mais j'ai du mal a le coder.. auriez-vous une piste ?

parce qu'en fait mon principal probleme c'est que qd l'utilisateur arrive sur la page d'edition, meme si le pays selectionne est USA (recupere de la base de donnee), la liste des etats est disabled. ce n'est que quand je selectionne un pays au hasard et puis que je reselectionne usa que la liste d'etats s'affiche.

liste deroulante javascript

JavaScript

Discussions similaires

Partager

Partager