liste deroulante javascript
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:
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:
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:
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 :(
