IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Trois Listes deroulante liées


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Par défaut Trois Listes deroulante liées
    Bonjour,

    J'ai récupéré un code sur ce site et j’aimerais lui apporter des modifications.
    1- Supprimer les ancienne région
    2- Mettre un lien vers l'item à chaque liste

    Je joint le code:

    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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    <!DOCTYPE  html>
    <html>
          <head>
     
                <title>Index</title>
     
                <meta charset="utf-8">
     
                <link type="text/css" rel="stylesheet" href="style.css">
     
    <style>
            #liste {
      width: 36em;
      margin-left: 3em;
      padding: 1em;
      border: 2px solid #fff;
      color: #069;
      background: linear-gradient(to right,#E0EAF2 0,#FFFFFF 40em) repeat-x scroll 0 0 transparent;
      box-shadow: 0 0 10px #888;
    }
    #liste p {
      height: 2em;
      line-height: 2em;
    }
    #liste label {
      display: inline-block;
      width: 10em;
    }
    #liste label:after {
      content: ":";
      float: right;
      margin-right: 0.5em;
    }
    #liste select,
    #liste option {
      cursor: pointer;
    }
    #liste select,
    #liste input {
      box-sizing: border-box;
      width: 21em;
      margin: 0;
      padding: 0;
      border: 1px solid #888;
      border-radius: 2px;
      font: 1em/1.5 Verdana,sans-serif;
      color: #000;
    }
    #liste select option:first-child {
      font-style: italic;
      color: #888;
    }
    #liste select:disabled {
      background:transparent;
    }
    #liste .nombre {
      display: inline-block;
      width: 2em;
      text-align: right;
      font-size: 0.8em;
      font-style: italic;
      color: #888;
    }
    #liste input/*#prefecture*/{
      padding: 0 0 0 0.25em;
      background:transparent;
    }
    @media (max-width: 640px) {
      #liste {
        width:auto;
        margin-left:0;
      }
      #liste p {
        height:auto;
      }  
      #liste label {
        display: block;
      }
      #liste select,
      #liste input{
        width:100%;
      }
    }  
              
              
              </style>
        </head>
     
        <body>
        <div class="BlocSection0">
     
     
        <div id="liste">
          <p>
            <label>Région 2016</label>
            <select id="new_region"><option value="">Choisir</option><option value="NR_75">Aquitaine-Limousin-Poitou-Charentes</option><option value="NR_84">Auvergne-Rhône-Alpes</option><option value="NR_27">Bourgogne-Franche-Comté</option><option value="NR_53">Bretagne</option><option value="NR_24">Centre-Val de Loire</option><option value="NR_94">Corse</option><option value="NR_44">Grand Est</option><option value="NR_01">Guadeloupe</option><option value="NR_03">Guyane</option><option value="NR_32">Hauts-de-France</option><option value="NR_11">Ile-de-France</option><option value="NR_04">La Réunion</option><option value="NR_76">Languedoc-Roussillon-Midi-Pyrénées</option><option value="NR_02">Martinique</option><option value="NR_06">Mayotte</option><option value="NR_28">Normandie</option><option value="NR_52">Pays de la Loire</option><option value="NR_93">Provence-Alpes-Côte d'Azur</option></select>
            <span class="nombre">(18)</span>
          </p>
          <p>
            <label>Ancienne région</label>
            <select id="old_region"><option value="">Choisir</option><option value="R_83">Auvergne</option><option value="R_82">Rhône-Alpes</option></select>
            <span class="nombre">(2)</span>
          </p>
          <p>
            <label>Département</label>
            <select id="departement"><option value="">Choisir</option><option value="Moulins">Allier</option><option value="Aurillac">Cantal</option><option value="Le Puy-en-Velay">Haute Loire</option><option value="Clermont-Ferrand">Puy-de-Dôme</option></select>
            <span class="nombre">(4)</span>
          </p>
          <p>
            <label>Préfecture</label>
            <input id="prefecture" readonly="">
          </p>
        </div>
     
     
    <script src="fichiers/dvp_listes_liees_tbl.js" charset="UTF-8"></script>
    <script src="fichiers/dvp_listes_liees.js" charset="UTF-8"></script>
     
     
    		</div>
     
     
     
     
     
      <script>
            
          var tbl_region_2016 = [
    {"reg_2016_code": "NR_01", "reg_2016_nom": "Guadeloupe"}, 
    {"reg_2016_code": "NR_02", "reg_2016_nom": "Martinique"}, 
    {"reg_2016_code": "NR_03", "reg_2016_nom": "Guyane"}, 
    {"reg_2016_code": "NR_04", "reg_2016_nom": "La Réunion"}, 
    {"reg_2016_code": "NR_06", "reg_2016_nom": "Mayotte"}, 
    {"reg_2016_code": "NR_11", "reg_2016_nom": "Ile-de-France"}, 
    {"reg_2016_code": "NR_24", "reg_2016_nom": "Centre-Val de Loire"}, 
    {"reg_2016_code": "NR_27", "reg_2016_nom": "Bourgogne-Franche-Comté"}, 
    {"reg_2016_code": "NR_28", "reg_2016_nom": "Normandie"}, 
    {"reg_2016_code": "NR_32", "reg_2016_nom": "Hauts-de-France"}, 
    {"reg_2016_code": "NR_44", "reg_2016_nom": "Grand Est"},
    {"reg_2016_code": "NR_52", "reg_2016_nom": "Pays de la Loire"}, 
    {"reg_2016_code": "NR_53", "reg_2016_nom": "Bretagne"}, 
    {"reg_2016_code": "NR_75", "reg_2016_nom": "Aquitaine-Limousin-Poitou-Charentes"}, 
    {"reg_2016_code": "NR_76", "reg_2016_nom": "Languedoc-Roussillon-Midi-Pyrénées"}, 
    {"reg_2016_code": "NR_84", "reg_2016_nom": "Auvergne-Rhône-Alpes"}, 
    {"reg_2016_code": "NR_93", "reg_2016_nom": "Provence-Alpes-Côte d'Azur"}, 
    {"reg_2016_code": "NR_94", "reg_2016_nom": "Corse"}
    ];
     
    var tbl_old_region =[
    {"reg_code": "R_42", "reg_nom": "Alsace", "reg_2016_code": "NR_44"}, 
    {"reg_code": "R_21", "reg_nom": "Champagne-Ardenne", "reg_2016_code": "NR_44"}, 
    {"reg_code": "R_41", "reg_nom": "Lorraine", "reg_2016_code": "NR_44"}, 
    {"reg_code": "R_72", "reg_nom": "Aquitaine", "reg_2016_code": "NR_75"}, 
    {"reg_code": "R_74", "reg_nom": "Limousin", "reg_2016_code": "NR_75"}, 
    {"reg_code": "R_54", "reg_nom": "Poitou-Charentes", "reg_2016_code": "NR_75"}, 
    {"reg_code": "R_83", "reg_nom": "Auvergne", "reg_2016_code": "NR_84"}, 
    {"reg_code": "R_82", "reg_nom": "Rhône-Alpes", "reg_2016_code": "NR_84"}, 
    {"reg_code": "R_26", "reg_nom": "Bourgogne", "reg_2016_code": "NR_27"}, 
    {"reg_code": "R_43", "reg_nom": "Franche-Comté", "reg_2016_code": "NR_27"}, 
    {"reg_code": "R_53", "reg_nom": "Bretagne", "reg_2016_code": "NR_53"}, 
    {"reg_code": "R_24", "reg_nom": "Centre", "reg_2016_code": "NR_24"}, 
    {"reg_code": "R_94", "reg_nom": "Corse", "reg_2016_code": "NR_94"}, 
    {"reg_code": "R_11", "reg_nom": "Ile-de-France", "reg_2016_code": "NR_11"}, 
    {"reg_code": "R_91", "reg_nom": "Languedoc-Roussillon", "reg_2016_code": "NR_76"}, 
    {"reg_code": "R_73", "reg_nom": "Midi-Pyrénées", "reg_2016_code": "NR_76"}, 
    {"reg_code": "R_31", "reg_nom": "Nord-Pas-de-Calais", "reg_2016_code": "NR_32"}, 
    {"reg_code": "R_22", "reg_nom": "Picardie", "reg_2016_code": "NR_32"}, 
    {"reg_code": "R_25", "reg_nom": "Basse-Normandie", "reg_2016_code": "NR_28"}, 
    {"reg_code": "R_23", "reg_nom": "Haute-Normandie", "reg_2016_code": "NR_28"}, 
    {"reg_code": "R_52", "reg_nom": "Pays de la Loire", "reg_2016_code": "NR_52"}, 
    {"reg_code": "R_93", "reg_nom": "Provence-Alpes-Côte d'Azur ", "reg_2016_code": "NR_93"}, 
    {"reg_code": "R_01", "reg_nom": "Guadeloupe", "reg_2016_code": "NR_01"}, 
    {"reg_code": "R_02", "reg_nom": "Martinique", "reg_2016_code": "NR_02"}, 
    {"reg_code": "R_03", "reg_nom": "Guyane", "reg_2016_code": "NR_03"}, 
    {"reg_code": "R_04", "reg_nom": "La Réunion", "reg_2016_code": "NR_04"}, 
    {"reg_code": "R_06", "reg_nom": "Mayotte", "reg_2016_code": "NR_06"}
    ];
    var tbl_departement = [
    {"dep_code": "D_67", "reg_code": "R_42", "dep_nom": "Bas-Rhin", "dep_prefecture": "Strasbourg"}, 
    {"dep_code": "D_68", "reg_code": "R_42", "dep_nom": "Haut-Rhin", "dep_prefecture": "Colmar"}, 
    {"dep_code": "D_24", "reg_code": "R_72", "dep_nom": "Dordogne", "dep_prefecture": "Périgueux"}, 
    {"dep_code": "D_33", "reg_code": "R_72", "dep_nom": "Gironde", "dep_prefecture": "Bordeaux"}, 
    {"dep_code": "D_40", "reg_code": "R_72", "dep_nom": "Landes", "dep_prefecture": "Mont-de-Marsan"}, 
    {"dep_code": "D_47", "reg_code": "R_72", "dep_nom": "Lot-et-Garonne", "dep_prefecture": "Agen"}, 
    {"dep_code": "D_64", "reg_code": "R_72", "dep_nom": "Pyrénées Atlantiques", "dep_prefecture": "Pau"}, 
    {"dep_code": "D_03", "reg_code": "R_83", "dep_nom": "Allier", "dep_prefecture": "Moulins"}, 
    {"dep_code": "D_15", "reg_code": "R_83", "dep_nom": "Cantal", "dep_prefecture": "Aurillac"}, 
    {"dep_code": "D_43", "reg_code": "R_83", "dep_nom": "Haute Loire", "dep_prefecture": "Le Puy-en-Velay"}, 
    {"dep_code": "D_63", "reg_code": "R_83", "dep_nom": "Puy-de-Dôme", "dep_prefecture": "Clermont-Ferrand"}, 
    {"dep_code": "D_14", "reg_code": "R_25", "dep_nom": "Calvados", "dep_prefecture": "Caen"}, 
    {"dep_code": "D_50", "reg_code": "R_25", "dep_nom": "Manche", "dep_prefecture": "Saint-Lô"}, 
    {"dep_code": "D_61", "reg_code": "R_25", "dep_nom": "Orne", "dep_prefecture": "Alençon"}, 
    {"dep_code": "D_21", "reg_code": "R_26", "dep_nom": "Côte-d'Or", "dep_prefecture": "Dijon"}, 
    {"dep_code": "D_58", "reg_code": "R_26", "dep_nom": "Nièvre", "dep_prefecture": "Nevers"}, 
    {"dep_code": "D_71", "reg_code": "R_26", "dep_nom": "Saône-et-Loire", "dep_prefecture": "Mâcon"}, 
    {"dep_code": "D_89", "reg_code": "R_26", "dep_nom": "Yonne", "dep_prefecture": "Auxerre"}, 
    {"dep_code": "D_22", "reg_code": "R_53", "dep_nom": "Côtes d'Armor", "dep_prefecture": "Saint-Brieuc"}, 
    {"dep_code": "D_29", "reg_code": "R_53", "dep_nom": "Finistère", "dep_prefecture": "Quimper"}, 
    {"dep_code": "D_35", "reg_code": "R_53", "dep_nom": "Ille-et-Vilaine", "dep_prefecture": "Rennes"}, 
    {"dep_code": "D_56", "reg_code": "R_53", "dep_nom": "Morbihan", "dep_prefecture": "Vannes"}, 
    {"dep_code": "D_18", "reg_code": "R_24", "dep_nom": "Cher", "dep_prefecture": "Bourges"}, 
    {"dep_code": "D_28", "reg_code": "R_24", "dep_nom": "Eure-et-Loir", "dep_prefecture": "Chartres"}, 
    {"dep_code": "D_36", "reg_code": "R_24", "dep_nom": "Indre", "dep_prefecture": "Châteauroux"}, 
    {"dep_code": "D_37", "reg_code": "R_24", "dep_nom": "Indre-et-Loire", "dep_prefecture": "Tours"}, 
    {"dep_code": "D_41", "reg_code": "R_24", "dep_nom": "Loir-et-Cher", "dep_prefecture": "Blois"}, 
    {"dep_code": "D_45", "reg_code": "R_24", "dep_nom": "Loiret", "dep_prefecture": "Orléans"}, 
    {"dep_code": "D_08", "reg_code": "R_21", "dep_nom": "Ardennes", "dep_prefecture": "Charleville-Mézières"}, 
    {"dep_code": "D_10", "reg_code": "R_21", "dep_nom": "Aube", "dep_prefecture": "Troyes"}, 
    {"dep_code": "D_51", "reg_code": "R_21", "dep_nom": "Marne", "dep_prefecture": "Châlons-en-Champagne"}, 
    {"dep_code": "D_52", "reg_code": "R_21", "dep_nom": "Haute Marne", "dep_prefecture": "Chaumont"}, 
    {"dep_code": "D_2A", "reg_code": "R_94", "dep_nom": "Corse-du-Sud", "dep_prefecture": "Ajaccio"}, 
    {"dep_code": "D_2B", "reg_code": "R_94", "dep_nom": "Haute Corse", "dep_prefecture": "Bastia"}, 
    {"dep_code": "D_25", "reg_code": "R_43", "dep_nom": "Doubs", "dep_prefecture": "Besançon"}, 
    {"dep_code": "D_39", "reg_code": "R_43", "dep_nom": "Jura", "dep_prefecture": "Lons-le-Saunier"}, 
    {"dep_code": "D_70", "reg_code": "R_43", "dep_nom": "Haute Saône", "dep_prefecture": "Vesoul"}, 
    {"dep_code": "D_90", "reg_code": "R_43", "dep_nom": "Territoire de Belfort", "dep_prefecture": "Belfort"}, 
    {"dep_code": "D_27", "reg_code": "R_23", "dep_nom": "Eure", "dep_prefecture": "Évreux"}, 
    {"dep_code": "D_76", "reg_code": "R_23", "dep_nom": "Seine Maritime", "dep_prefecture": "Rouen"}, 
    {"dep_code": "D_75", "reg_code": "R_11", "dep_nom": "Paris", "dep_prefecture": "Paris"}, 
    {"dep_code": "D_77", "reg_code": "R_11", "dep_nom": "Seine-et-Marne", "dep_prefecture": "Melun"}, 
    {"dep_code": "D_78", "reg_code": "R_11", "dep_nom": "Yvelines", "dep_prefecture": "Versailles"}, 
    {"dep_code": "D_91", "reg_code": "R_11", "dep_nom": "Essonne", "dep_prefecture": "Îvry"}, 
    {"dep_code": "D_92", "reg_code": "R_11", "dep_nom": "Hauts-de-Seine", "dep_prefecture": "Nanterre"}, 
    {"dep_code": "D_93", "reg_code": "R_11", "dep_nom": "Seine-St-Denis", "dep_prefecture": "Bobigny"}, 
    {"dep_code": "D_94", "reg_code": "R_11", "dep_nom": "Val-de-Marne", "dep_prefecture": "Créteil"}, 
    {"dep_code": "D_95", "reg_code": "R_11", "dep_nom": "Val-D'Oise", "dep_prefecture": "Cergy"}, 
    {"dep_code": "D_11", "reg_code": "R_91", "dep_nom": "Aude", "dep_prefecture": "Carcassonne"}, 
    {"dep_code": "D_30", "reg_code": "R_91", "dep_nom": "Gard", "dep_prefecture": "Nîmes"}, 
    {"dep_code": "D_34", "reg_code": "R_91", "dep_nom": "Hérault", "dep_prefecture": "Montpellier"}, 
    {"dep_code": "D_48", "reg_code": "R_91", "dep_nom": "Lozère", "dep_prefecture": "Mende"}, 
    {"dep_code": "D_66", "reg_code": "R_91", "dep_nom": "Pyrénées Orientales", "dep_prefecture": "Perpignan"}, 
    {"dep_code": "D_19", "reg_code": "R_74", "dep_nom": "Corrèze", "dep_prefecture": "Tulle"}, 
    {"dep_code": "D_23", "reg_code": "R_74", "dep_nom": "Creuse", "dep_prefecture": "Guèret"}, 
    {"dep_code": "D_87", "reg_code": "R_74", "dep_nom": "Haute Vienne", "dep_prefecture": "Limoges"}, 
    {"dep_code": "D_54", "reg_code": "R_41", "dep_nom": "Meurthe-et-Moselle", "dep_prefecture": "Nancy"}, 
    {"dep_code": "D_55", "reg_code": "R_41", "dep_nom": "Meuse", "dep_prefecture": "Bar-le-Duc"}, 
    {"dep_code": "D_57", "reg_code": "R_41", "dep_nom": "Moselle", "dep_prefecture": "Metz"}, 
    {"dep_code": "D_88", "reg_code": "R_41", "dep_nom": "Vosges", "dep_prefecture": "Épinal"}, 
    {"dep_code": "D_09", "reg_code": "R_73", "dep_nom": "Ariège", "dep_prefecture": "Foix"}, 
    {"dep_code": "D_12", "reg_code": "R_73", "dep_nom": "Aveyron", "dep_prefecture": "Rodez"}, 
    {"dep_code": "D_31", "reg_code": "R_73", "dep_nom": "Haute Garonne", "dep_prefecture": "Toulouse"}, 
    {"dep_code": "D_32", "reg_code": "R_73", "dep_nom": "Gers", "dep_prefecture": "Auch"}, 
    {"dep_code": "D_46", "reg_code": "R_73", "dep_nom": "Lot", "dep_prefecture": "Cahors"}, 
    {"dep_code": "D_65", "reg_code": "R_73", "dep_nom": "Hautes Pyrénées", "dep_prefecture": "Tarbes"}, 
    {"dep_code": "D_81", "reg_code": "R_73", "dep_nom": "Tarn", "dep_prefecture": "Albi"}, 
    {"dep_code": "D_82", "reg_code": "R_73", "dep_nom": "Tarn-et-Garonne", "dep_prefecture": "Montauban"}, 
    {"dep_code": "D_59", "reg_code": "R_31", "dep_nom": "Nord", "dep_prefecture": "Lille"}, 
    {"dep_code": "D_62", "reg_code": "R_31", "dep_nom": "Pas-de-Calais", "dep_prefecture": "Arras"}, 
    {"dep_code": "D_44", "reg_code": "R_52", "dep_nom": "Loire Atlantique", "dep_prefecture": "Nantes"}, 
    {"dep_code": "D_49", "reg_code": "R_52", "dep_nom": "Maine-et-Loire", "dep_prefecture": "Angers"}, 
    {"dep_code": "D_53", "reg_code": "R_52", "dep_nom": "Mayenne", "dep_prefecture": "Laval"}, 
    {"dep_code": "D_72", "reg_code": "R_52", "dep_nom": "Sarthe", "dep_prefecture": "Le Mans"}, 
    {"dep_code": "D_85", "reg_code": "R_52", "dep_nom": "Vendée", "dep_prefecture": "La Roche-sur-Yon"}, 
    {"dep_code": "D_02", "reg_code": "R_22", "dep_nom": "Aisne", "dep_prefecture": "Laon"}, 
    {"dep_code": "D_60", "reg_code": "R_22", "dep_nom": "Oise", "dep_prefecture": "Beauvais"}, 
    {"dep_code": "D_80", "reg_code": "R_22", "dep_nom": "Somme", "dep_prefecture": "Amiens"}, 
    {"dep_code": "D_16", "reg_code": "R_54", "dep_nom": "Charente", "dep_prefecture": "Angoulème"}, 
    {"dep_code": "D_17", "reg_code": "R_54", "dep_nom": "Charente-Maritime", "dep_prefecture": "La Rochelle"}, 
    {"dep_code": "D_79", "reg_code": "R_54", "dep_nom": "Deux-Sèvres", "dep_prefecture": "Niort"}, 
    {"dep_code": "D_86", "reg_code": "R_54", "dep_nom": "Vienne", "dep_prefecture": "Poitiers"}, 
    {"dep_code": "D_04", "reg_code": "R_93", "dep_nom": "Alpes de Haute Provence", "dep_prefecture": "Digne-les-Bains"}, 
    {"dep_code": "D_05", "reg_code": "R_93", "dep_nom": "Hautes-Alpes", "dep_prefecture": "Gap"}, 
    {"dep_code": "D_06", "reg_code": "R_93", "dep_nom": "Alpes Maritimes", "dep_prefecture": "Nice"}, 
    {"dep_code": "D_13", "reg_code": "R_93", "dep_nom": "Bouches-du-Rhône", "dep_prefecture": "Marseille"}, 
    {"dep_code": "D_83", "reg_code": "R_93", "dep_nom": "Var", "dep_prefecture": "Toulon"}, 
    {"dep_code": "D_84", "reg_code": "R_93", "dep_nom": "Vaucluse", "dep_prefecture": "Avignon"}, 
    {"dep_code": "D_01", "reg_code": "R_82", "dep_nom": "Ain", "dep_prefecture": "Bourg-en-Bresse"}, 
    {"dep_code": "D_07", "reg_code": "R_82", "dep_nom": "Ardèche", "dep_prefecture": "Privas"}, 
    {"dep_code": "D_26", "reg_code": "R_82", "dep_nom": "Drôme", "dep_prefecture": "Valence"}, 
    {"dep_code": "D_38", "reg_code": "R_82", "dep_nom": "Isère", "dep_prefecture": "Grenoble"}, 
    {"dep_code": "D_42", "reg_code": "R_82", "dep_nom": "Loire", "dep_prefecture": "Saint-Étienne"}, 
    {"dep_code": "D_69", "reg_code": "R_82", "dep_nom": "Rhône", "dep_prefecture": "Lyon"}, 
    {"dep_code": "D_73", "reg_code": "R_82", "dep_nom": "Savoie", "dep_prefecture": "Chambéry"}, 
    {"dep_code": "D_74", "reg_code": "R_82", "dep_nom": "Haute Savoie", "dep_prefecture": "Annecy"}, 
    {"dep_code": "D_971", "reg_code": "R_01", "dep_nom": "Guadeloupe", "dep_prefecture": "Basse-Terre"}, 
    {"dep_code": "D_972", "reg_code": "R_02", "dep_nom": "Martinique", "dep_prefecture": "Fort-de-France"}, 
    {"dep_code": "D_973", "reg_code": "R_03", "dep_nom": "Guyane", "dep_prefecture": "Cayenne"}, 
    {"dep_code": "D_974", "reg_code": "R_04", "dep_nom": "La Réunion", "dep_prefecture": "Saint-Denis"}, 
    {"dep_code": "D_976", "reg_code": "R_06", "dep_nom": "Mayotte", "dep_prefecture": "Mamoudzou"}
    ];
    // tri dans l'ordre alpha pour new région
    tbl_region_2016.sort(function(a, b){
      if( a.reg_2016_nom < b.reg_2016_nom)
         return( -1);
      if( a.reg_2016_nom > b.reg_2016_nom)
         return( 1);
      return( 0);    
    });
      
            
            
            </script>      
     
     
     
       <script>
            
            /**
    * Fonction de récupération des données correspondant au critère de recherche
    * @param   {String} condition - Chaine indiquant la condition à  remplir
    * @param   {Array}  table - Tableau contenant les données à  extraire
    * @returns {Array}  result - Tableau contenant les données extraites
    */
    function getDataFromTable( condition, table) {
      // récupération de la clé et de la valeur
      var cde = condition.replace(/\s/g, '').split('='),
          key = cde[0],
          value = cde[1],
          result = [];
      
      // retour direct si *
      if (condition === '*') {
        return table.slice();
      }
      // retourne les éléments répondant à  la condition
      result = table.filter( function(obj){
           return obj[key] === value;
        });
      return result;
    }
    /**
    * Affichage du nombre d'<option> présentes dans le <select>
    * @param {Object} obj - <select> parent
    * @param {Number} nb - nombre à  afficher
    */
    function setNombre( obj, nb){
      var oElem = obj.parentNode.querySelector('.nombre');
      if( oElem){
        oElem.innerHTML = nb ? '(' +nb +')' :'';
      }
    }
    /**
    * Fonction d'ajout des <option> Ã  un <select>
    * @param   {String} id_select - ID du <select> à  mettre à  jour
    * @param   {Array}  liste - Tableau contenant les données à  ajouter
    * @param   {String} valeur - Champ pris en compte pour la value de l'<option>
    * @param   {String} texte - Champ pris en compte pour le texte affiché de l'<option>
    * @returns {String} Valeur sélectionnée du <select> pour chainage
    */
    function updateSelect( id_select, liste, valeur, texte){
      var oOption,
          oSelect = document.getElementById( id_select),
          i, nb = liste.length;
      // vide le select
      oSelect.options.length = 0;
      // désactive si aucune option disponible
      oSelect.disabled = nb ? false : true;
      // affiche info nombre options, facultatif
      setNombre( oSelect, nb);
      // ajoute 1st option
      if( nb){
        oSelect.add( new Option( 'Choisir', ''));
        // focus sur le select
        oSelect.focus();
      }
      // création des options d'après la liste
      for (i = 0; i < nb; i += 1) {
        // création option
        oOption = new Option( liste[i][texte], liste[i][valeur]);
        // ajout de l'option en fin
        oSelect.add( oOption);
      }
      // si une seule option on la sélectionne
      oSelect.selectedIndex = nb === 1 ? 1 : 0;
      // on retourne la valeur pour le select suivant
      return oSelect.value;
    }
    /**
    * fonction de chainage des <select>
    * @param {String|Object} ID du <select> Ã  traiter ou le <select> lui-même
    */
    function chainSelect( param){
      // affectation par défaut
      param = param || 'init';
      var liste,
          id     = param.id || param,
          valeur = param.value || '';
          
      // test à  faire pour récupération de la value
      if( typeof id === 'string'){
         param = document.getElementById( id);
         valeur = param ? param.value : '';
       }
     
      switch (id){
        case 'init':
          // récup. des données
          liste = getDataFromTable( '*', tbl_region_2016);
          // mise à  jour du select
          valeur = updateSelect( 'new_region', liste, 'reg_2016_code', 'reg_2016_nom');
          // chainage sur le select lié
          chainSelect('new_region');
          break;
        case 'new_region':
          // récup. des données
          liste = getDataFromTable( 'reg_2016_code=' +valeur, tbl_old_region);
          // mise à  jour du select
          valeur = updateSelect( 'old_region', liste, 'reg_code', 'reg_nom');
          // chainage sur le select lié
          chainSelect('old_region');
          break;
        case 'old_region':
          // récup. des données
          liste = getDataFromTable( 'reg_code=' +valeur, tbl_departement);
          // mise à  jour du select
          valeur= updateSelect( 'departement', liste, 'dep_prefecture', 'dep_nom');
          // chainage sur le select lié
          chainSelect('departement');
          break;
        case 'departement':
          // affichage final
          document.getElementById('prefecture').value = valeur;
          break;
      }
    }
    // Initialisation après chargement du DOM
    document.addEventListener("DOMContentLoaded", function(event) {
      var oSelects = document.querySelectorAll('#liste select'),
          i, nb = oSelects.length;
      // affectation de la fonction sur le onchange
      for( i = 0; i < nb; i += 1) {
        oSelects[i].onchange = function() {
            chainSelect(this);
          };
      }
      // init du 1st select
      if( nb){
        chainSelect('init');
      }
    });
            
            </script>     
     
     
        </body>   
    </html>
    je vous remercie d'avance

    Max

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    1- Supprimer les ancienne région
    cela ne devrais pas te poser de problème

    2- Mettre un lien vers l'item à chaque liste
    là j'avoue ne pas comprendre le but du jeu !

  3. #3
    Membre éclairé
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Par défaut
    Bonjour NoSmoking,

    Je te remercie mettre un lien je veut dire que sur la troisième liste en cliquant dessus je puisse ouvrir une page dédier à la recherche

    @+

    Max

  4. #4
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Salut,

    Ah ça me rappelle le lien que je t'avais indiqué si je ne me trompe pas donc finalement tu t'es décidé à utiliser des listes liées ?

    Je n'ai plus tout en tête mais toi tes trois listes ce serait : continents, pays et régions c'est ça ? Cela correspondrait je crois dans le code de NoSmoking respectivement à "Région 2016", "Ancienne région" et "Département".

    J'ai vu qu'il y avait trois tableaux correspondant à ces trois listes mais je n'ai pas étudier le code, il faudrait suivre le tuto je pense...

    Mais je crois qu'il fa falloir remplir ces tableau à la main...
    D'ailleurs à ce propos as-tu fais les tables (liste des continents, pays et régions) dont on avait parlés sur l'autre fil si ma mémoire est bonne ?
    Tu pourrais peut-être avec un code JS remplir ces trois tableaux (liste) automatiquement à partir de ces tables ?

  5. #5
    Membre éclairé
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Par défaut
    Bonjour NoSmoking,

    Je te remercie à toi et à danielhagnoul de vos réponses au sujet Liste déroulante avec lien .

    @apdf1 : tu en es où de cette discussion : Trois Listes déroulantes liées, tu as abandonné ?
    Non je n'est rien abandonné, mais je cherche toujours à mettre un lien vers le département ex:

    région 2016: Centre Val de Loire / ancienne région: Centre / département: Cher et là ajouter un lien vers la page nommé: cher.html

    Je te remercie et te souhaite une bonne journée

    Max

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Citation Envoyé par apdf1 Voir le message
    [...] ajouter un lien vers [...]
    Exemple, un lien vers la préfecture sur WIKI :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    document.querySelector( "#prefecture" ).addEventListener( "click", ev => {
      let str = ev.target.value;
     
      if ( str.length > 1 ) window.location.href = "https://fr.wikipedia.org/wiki/" + str;
    }, false );
    Pour les autres (département et région), l'événement "click" est déjà utilisé pour gérer les listes liées.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  7. #7
    Membre éclairé
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Par défaut
    Bonjour danielhagnoul

    Je te remercie cela fonctionne très bien vers les préfectures sur WIKI. Oui mais comment je doit faire pour ouvrir mes pages.html en sachant que mes pages se trouvent dans
    K:\Site\dossier_carte\Dossier_Europe\France\Auvergne_Rhone_Alpes\bourg_en_bresse.html

    J'ai fait ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    if ( str.length > 1 ) window.location.href = "europe/france/" + str + ".html";
    mais je n'arrive pas à ajouter la région?
    Bonne journée

    Max

  8. #8
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Citation Envoyé par apdf1 Voir le message
    [...] ouvrir mes pages.html en sachant que mes pages se trouvent dans K:\Site\dossier_carte\Dossier_Europe\France\Auvergne_Rhone_Alpes\bourg_en_bresse.html
    Désolé pour le délai, j'ai eu un peu de mal à comprendre le fonctionnement de getDataFromTable().

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    document.querySelector( "#prefecture" ).addEventListener( "click", ev => {
      let 
        prefecture = ev.target.value,
        region = getDataFromTable( "reg_2016_code=" + document.querySelector( "#new_region" ).value, tbl_region_2016 )[0]["reg_2016_nom"];
     
      if ( region.length > 1 ) window.location.href = "K:/Site/dossier_carte/Dossier_Europe/France/" + region + "/" + prefecture + ".html";
    }, false );

    Pour vos noms de fichiers, attention à l'orthographe des noms de "region" et de "prefecture", elle doit être la même que dans les listes liées !

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  9. #9
    Membre éclairé
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Par défaut
    Re,

    Je te remercie sa fonctionne Nickel.

    Oui j'ai remarqué que l'orthographe des noms de "région" et de "préfecture", ne sont pas les même je vais mettre cela avec la bonne orthographe.

    Merci et bonne journée

    Max

  10. #10
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Citation Envoyé par apdf1 Voir le message
    Oui j'ai remarqué que l'orthographe des noms de "région" et de "préfecture", ne sont pas les même je vais mettre cela avec la bonne orthographe.
    Euh ben toi tu n'as pas de "préfecture", je croyais que tu avais : continents, pays et régions... Dans l'autre fil tu voulais faire le remplacement (adaptation à ton cas), il aurait été plus simple de commencer par ça sinon ça ne sera pas clair, tu risques de t’embrouiller et d'embrouiller ceux qui te répondent...

    Enfin tu fais comme tu veux...

  11. #11
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Citation Envoyé par apdf1 Voir le message
    J'ai fait ceci:
    if ( str.length > 1 ) window.location.href = "europe/france/" + str + ".html";
    mais je n'arrive pas à ajouter la région?
    Si tu utilises window.location il me semble que cela rechargera toute la page or je pensais plutôt que tu ferais une page avec un menu pour sélectionner les pays/régions et à coté une iframe pour afficher la carte du pays/de la région sélectionné(e) ---> seule la carte serait chargée pas le menu...

    Enfin c'est un sujet à traiter dans l'autre fil...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AC-2010] Creer trois listes deroulantes dependantes
    Par azou17 dans le forum IHM
    Réponses: 0
    Dernier message: 27/02/2014, 00h57
  2. N'efface qu'une option de liste deroulante sur trois
    Par caro71ol dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 24/01/2011, 14h55
  3. [MySQL] comment créer trois listes deroulantes dynamiques liées et tirées de trois tables
    Par manfal dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 03/02/2009, 16h34
  4. liste deroulante avec plusieurs champs
    Par JulienT dans le forum Struts 1
    Réponses: 4
    Dernier message: 20/04/2004, 17h17
  5. [langage] liste déroulante
    Par Jeh dans le forum Langage
    Réponses: 6
    Dernier message: 16/09/2003, 10h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo