PHP / JS表单链表

Question

我遇到两个绑定列表的问题：第一个是'部分'列表，另一个是'ville'列表。 这些列表的特点，我们不希望使用数据库。

所以，我在我的第一页中有这个PHP代码来管理'Departements'列表：

<section id="form" class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
</div>
<form action="http://mon-site.fr/contact/" method="post">
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
        <div class="form-group">
            <select name="departement" id="departement" class="form-control">
                <option value="0">S&eacute;lectionnez votre D&eacute;partement</option>
                <option value="01">01 - Ain</option>
                <option value="02">02 - Aisne</option>
                <option value="03">03 - Allier</option>
                <option value="04">04 - Alpes-de-Haute-Provence</option>
                <option value="05">05 - Hautes-Alpes</option>
                <option value="06">06 - Alpes-Maritimes</option>
                <option value="07">07 - Ard&egrave;che</option>
                <option value="08">08 - Ardennes</option>
                <option value="09">09 - Ari&egrave;ge</option>
                <option value="10">10 - Aube</option>
                <option value="11">11 - Aude</option>
                <option value="12">12 - Aveyron</option>
                <option value="13">13 - Bouches-du-rh&ocirc;ne</option>
                <option value="14">14 - Calvados</option>
                <option value="15">15 - Cantal</option>
                <option value="16">16 - Charente</option>
                <option value="17">17 - Charente-Maritime</option>
                <option value="18">18 - Cher</option>
                <option value="19">19 - Corr&egrave;ze</option>
                <option value="21">21 - C&ocirc;te-d'Or</option>
                <option value="22">22 - C&ocirc;tes-d'Armor</option>
                <option value="23">23 - Creuse</option>
                <option value="24">24 - Dordogne</option>
                <option value="25">25 - Doubs</option>
                <option value="26">26 - Dr&ocirc;me</option>
                <option value="27">27 - Eure</option>
                <option value="28">28 - Eure-et-Loir</option>
                <option value="29">29 - Finist&egrave;re</option>
                <option value="30">30 - Gard</option>
                <option value="31">31 - Haute-Garonne</option>
                <option value="32">32 - Gers</option>
                <option value="33">33 - Gironde</option>
                <option value="34">34 - H&eacute;rault</option>
                <option value="35">35 - IIlle-et-Vilaine</option>
                <option value="36">36 - Indre</option>
                <option value="37">37 - Indre-et-Loire</option>
                <option value="38">38 - Is&egrave;re</option>
                <option value="39">39 - Jura</option>
                <option value="40">40 - Landes</option>
                <option value="41">41 - Loir-et-Cher</option>
                <option value="42">42 - Loire</option>
                <option value="43">43 - Haute-Loire</option>
                <option value="44">44 - Loire-Atlantique</option>
                <option value="45">45 - Loiret</option>
                <option value="46">46 - Lot</option>
                <option value="47">47 - Lot-et-Garonne</option>
                <option value="48">48 - Loz&egrave;re</option>
                <option value="49">49 - Maine-et-Loire</option>
                <option value="50">50 - Manche</option>
                <option value="51">51 - Marne</option>
                <option value="52">52 - Haute-Marne</option>
                <option value="53">53 - Mayenne</option>
                <option value="54">54 - Meurthe-et-Moselle</option>
                <option value="55">55 - Meuse</option>
                <option value="56">56 - Morbihan</option>
                <option value="57">57 - Moselle</option>
                <option value="58">58 - Ni&egrave;vre</option>
                <option value="59">59 - Nord</option>
                <option value="60">60 - Oise</option>
                <option value="61">61 - Orne</option>
                <option value="62">62 - Pas-de-Calais</option>
                <option value="63">63 - Puy-de-D&ocirc;me</option>
                <option value="64">64 - Pyr&eacute;n&eacute;es-Atlantiques</option>
                <option value="65">65 - Haute-Pyr&eacute;n&eacute;es</option>
                <option value="66">66 - Pyr&eacute;n&eacute;es-Orientales</option>
                <option value="67">67 - Bas-Rhin</option>
                <option value="68">68 - Haut-Rhin</option>
                <option value="69">69 - Rh&ocirc;ne</option>
                <option value="70">70 - Haute-Sa&ocirc;ne/option>
                <option value="71">71 - Sa&ocirc;ne-et-Loire</option>
                <option value="72">72 - Sarthe</option>
                <option value="73">73 - Savoie</option>
                <option value="74">74 - Haute-Savoie</option>
                <option value="75">75 - Paris</option>
                <option value="76">76 - Seine-Maritime</option>
                <option value="77">77 - Seine-et-Marne</option>
                <option value="78">78 - Yvelines</option>
                <option value="79">79 - Deux-S&egrave;vres</option>
                <option value="80">80 - Somme</option>
                <option value="81">81 - Tarn</option>
                <option value="82">82 - Tarn-et-Garonne</option>
                <option value="83">83 - Var</option>
                <option value="84">84 - Vaucluse</option>
                <option value="85">85 - Vend&eacute;e</option>
                <option value="86">86 - Vienne</option>
                <option value="87">87 - Haute-Vienne</option>
                <option value="88">88 - Vosges</option>
                <option value="89">89 - Yonne</option>
                <option value="90">90 - Territoire de Belfort</option>
                <option value="91">91 - Essonne</option>
                <option value="92">92 - Hauts-de-Seine</option>
                <option value="93">93 - Seine-Saint-Denis</option>
                <option value="94">94 - Val-de-Marne</option>
                <option value="95">95 - Val-d'Oise</option>
            </select>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
        <div class="form-group">
            <div id="ville" ></div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
        <button type="submit" class="btn btn-default width">OK</button>
    </div>
</form>

这个JS管理'ville'列表：

 <script>
function generation_liste2(){
    var dep={
        '01':["Belley","Bourg-en-Bresse","Nantua","Gex"],
        '02':["Chateau-Thierry","Laon","Saint-Quentin","Soissons","Vervins"],
        '03':["Montlucon","Moulins","Vichy"],
        '04':["Barcelonnette","Castellane","Digne-les-Bains","Forcalquier"],
        '05':["Briancon","Gap"],
        '06':["Grasse","Nice"],
        '07':["Largentiere","Privas","Tournon-sur-Rhone"],
        '08':["Charleville-Mezieres","Rethel","Sedan","Vouziers"],
        '09':["Foix","Pamiers","Saint-Girons"],
        '10':["Bar-sur-Aube","Nogent-sur-Seine","Troyes"],
        '11':["Carcassonne","Limoux","Narbonne"],
        '12':["Millau","Rodez","Villefranche-de-Rouergue"],
        '13':["Aix-en-Provence","Arles","Istres","Marseille"],
        '14':["Bayeux","Caen","Lisieux","Vire"],
        '15':["Aurillac","Mauriac","Saint-Flour"],
        '16':["Angouleme","Cognac","Confolens"],
        '17':["Jonzac","La Rochelle","Rochefort","Saint-Jean-d'Angely","Saintes"],
        '18':["Bourges","Saint-Amand-Montrond","Vierzon"],
        '19':["Brive-la-Gaillarde","Tulle","Ussel"],
        '21':["Beaune","Dijon","Montbard"],
        '22':["Dinan","Guingamp","Saint-Brieuc","Lannion"],
        '23':["Aubusson","Gueret"],
        '24':["Bergerac","Nontron","Perigueux","Sarlat-la-Caneda"],
        '25':["Besancon","Montbeliard","Pontarlier"],
        '26':["Die","Nyons","Valence"],
        '27':["Bernay","Evreux","Les Andelys"],
        '28':["Chartres","Chateaudun","Dreux","Nogent-le-Rotrou"],
        '29':["Brest","Chateaulin","Morlaix","Quimper"],
        '30':["Ales","Le Vigan","Nimes"],
        '31':["Muret","Toulouse","Saint-Gaudens"],
        '32':["Auch","Condom","Mirande"],
        '33':["Arcachon","Blaye","Bordeaux","Langon","Lesparre-Medoc","Libourne"],
        '34':["Beziers","Montpellier","Lodeve"],
        '35':["Fougeres","Rennes","Redon","Saint-Malo"],
        '36':["Chateauroux","Le Blanc","La Chatre","Issoudun"],
        '37':["Chinon","Loches","Tours"],
        '38':["Grenoble","La Tour du Pin","Vienne"],
        '39':["Dole","Lons-le-Saunier","Saint-Claude"],
        '40':["Dax","Mont-de-Marsan"],
        '41':["Blois","Romorantin-Lanthenay","Vendome"],
        '42':["Montbrison","Roanne","Saint-Etienne"],
        '43':["Brioude","Le Puy-en-Velay","Yssingeaux"],
        '44':["Ancenis","Chateaubriant","Nantes","Saint-Nazaire"],
        '45':["Montargis","Orleans","Pithiviers"],
        '46':["Cahors","Figeac","Gourdon"],
        '47':["Agen","Marmande","Nerac","Villeneuve-sur-Lot"],
        '48':["Florac","Mende"],
        '49':["Angers","Cholet","Saumur","Segre"],
        '50':["Avranches","Cherbourg-Octevillet","Coutances","Saint-Lo"],
        '51':["Chalons-en-Champagne","Epernay","Reims","Sainte-Menebould","Vitry-le-Francois"],
        '52':["Chaumont","Langres","Saint-Dizier"],
        '53':["Chateau-Gontier","Laval","Mayenne"],
        '54':["Briey","Luneville","Nancy","Toul"],
        '55':["Bar-le-Duc","Commercy","Verdun"],
        '56':["Lorient","Pontivy","Vannes"],
        '57':["Boulay-Moselle","Chateau-Salins","Forbach","Metz","Sarrebourg","Sarreguemines","Thionville"],
        '58':["Chateau-Chinon","Clamecy","Cosne-Cours-sur-Loireh","Nevers"],
        '59':["Avesnes-sur-Helpe","Cambrai","Dunkerque","Douai","Lille","Valenciennes"],
        '60':["Beauvais","Clermont","Compiegne","Senlis"],
        '61':["Alencon","Argentan","Mortagne-au-Perche"],
        '62':["Arras","Bethune","Boulogne-sur-Mer","Calais","Lens","Montreuil-sur-Mer","Saint-Omer"],
        '63':["Ambert","Clermont-Ferrand","Issoire","Riom","Thiers"],
        '64':["Bayonne","Oloron-Sainte-Marie","Pau"],
        '65':["Argeles-Gazost","Bagneres-de-Bigorre","Tarbes"],
        '66':["Ceret","Perpignan","Prades"],
        '67':["Haguenau","Molsheim","Saverne","Selestat","Strasbourg","Wissembourg"],
        '68':["Altkirch","Colmar","Guebwiller","Mulhouse","Ribeauville","Thann"],
        '69':["Lyon","Villefranche-sur-Saone"],
        '70':["Lure","Vesoul"],
        '71':["Autun","Chalon-sur-Saone","Charolles","Louhans","Macon"],
        '72':["La Fleche","Le Mans","Mamers"],
        '73':["Albertville","Chambery","Saint-Jean-de-Maurienne"],
        '74':["Annecy","Bonneville","Saint-Julien-en-Genevois","Thonon-les-Bains"],
        '75':["Paris"],
        '76':["Dieppe","Le Havre","Rouen"],
        '77':["Fontainebleau","Melun","Meaux","Torcy","Provins"],
        '78':["Mantes-la-Jolie","Rambouillet","Saint-Germain-en-Laye","Versailles"],
        '79':["Bressuire","Niort","Parthenay"],
        '80':["Abbeville","Amiens","Montdidier","Peronne"],
        '81':["Albi","Castres"],
        '82':["Castelsarrasin","Montauban"],
        '83':["Brignoles","Draguignan","Toulon"],
        '84':["Avignon","Apt","Carpentras"],
        '85':["Fontenay-le-Comte","La Roche-sur-Yon","Les-Sables-d'Olonne"],
        '86':["Chatellerault","Montmorillon","Poitiers"],
        '87':["Bellac","Limoges","Rochechouart"],
        '88':["Epinal","Neufchateau","Saint-Die-des-Vosges"],
        '89':["Auxerre","Avallon","Sens"],
        '90':["Belfort"],
        '91':["Evry","Palaiseau","Etampes"],
        '92':["Antony","Boulogne-Billancourt","Nanterre"],
        '93':["Bobigny","Le Raincy","Saint-Denis"],
        '94':["Creteil","L'Hay-les-Roses","Nogent-sur-Marne"],
        '95':["Argenteuil","Cergy","Pontoise","Sarcelles"]
    },
    choix=document.getElementById('departement').value,    
    tab=(typeof dep[choix]!=='undefined')?dep[choix]:null, 
    list='',elt,sel,opt,i;

    elt=document.getElementById('ville');
    while(elt.hasChildNodes())elt.removeChild(elt.lastChild);

    sel=document.createElement('select');
    sel.className = "form-control";
    sel.setAttribute('ville','ville');

    opt=document.createElement('option');
    opt.setAttribute('value','');
    opt.appendChild(document.createTextNode('Selectionnez la ville la plus    proche de chez vous'));
    sel.appendChild(opt);

    if(tab){
        for(i=0;i<tab.length;i++){
            opt=document.createElement('option');
            opt.setAttribute('value',tab[i]);
            opt.appendChild(document.createTextNode(tab[i]));
            sel.appendChild(opt);
        }
    }

    elt.appendChild(sel);      
    sel.disabled=(tab==null);  
}

window.onload=function(){
    document.getElementById('departement').onchange=generation_liste2;

    generation_liste2();
};

这个想法是：点击“确定”按钮，我们被重定向到另一个页面，完成一个表格，由前一页预先填写。 它适用于“Departement”字段，但不适用于“ville”..

以下是获取'部门'的第二页的代码（预览）：

<label>Num&eacute;ro de d&eacute;partement*</label>
            <select name="departement" id="departement" class="form-control">
                <option value="0">S&eacute;lectionnez votre D&eacute;partement</option>
                <option value="01" <?php if (isset($_POST['departement']) && $_POST['departement']== "01"){echo "selected";} ?>>01 - Ain</option>
                <option value="02" <?php if (isset($_POST['departement']) && $_POST['departement']== "02"){echo "selected";} ?>>02 - Aisne</option>
                <option value="03" <?php if (isset($_POST['departement']) && $_POST['departement']== "03"){echo "selected";} ?>>03 - Allier</option>
                <option value="04" <?php if (isset($_POST['departement']) && $_POST['departement']== "04"){echo "selected";} ?>>04 - Alpes-de-Haute-Provence</option>
                <option value="05" <?php if (isset($_POST['departement']) && $_POST['departement']== "05"){echo "selected";} ?>>05 - Hautes-Alpes</option>

获取'villes'的代码（预览）：

<div id="form_ville" class="form-group">
        <label>Nom de la ville*</label>
        <select id="ville" name="ville" class="form-control">
          <option value="-1">S&eacute;lectionnez votre ville</option>
          <option value="Belley" class="01" <?php if (isset($_POST['ville']) && $_POST['ville']== "Belley"){echo "selected";} ?>>Belley</option>
          <option value="Bourg-en-Bresse" class="01" <?php if (isset($_POST['ville']) && $_POST['ville']== "Bourg-en-Bresse"){echo "selected";} ?>>Bourg-en-Bresse</option>
          <option value="Nantua" class="01" <?php if (isset($_POST['ville']) && $_POST['ville']== "Nantua"){echo "selected";} ?>>Nantua</option>

但它不适用于在我的第二页上获取'ville'。 如果您有任何想法..谢谢！