Plusieurs façons d'ajouter une option

**tarte-aux-fraises** · 14/11/2016, 12h35

Bonjour à tous,
Je suis troublé en recherchant des exemples je constate qu'il y a des dizaines de façons différentes de procéder pour réaliser la même chose, petit exemple:

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html>
<body>
<form>
    <select id="mySelect" size="8">
        <option>Apple</option>
        <option>Pear</option>
        <option>Banana</option>
        <option>Orange</option>
    </select>
</form>
<button type="button" onclick="myFunction1()">Insert option</button>
<button type="button" onclick="myFunction2()">Insert option</button>
<button type="button" onclick="myFunction3()">Insert option</button>
<script>
var mySelect = document.getElementById('mySelect');
function myFunction1(){
    var option = document.createElement('option');
    option.value = 'Kiwi';
    option.text = 'Kiwi';
    mySelect.add(option);
}
function myFunction2(){
    var option = document.createElement('option');
    option.setAttribute('value','Orange');
    var t_node = document.createTextNode('Orange');
    option.appendChild(t_node);
    mySelect.appendChild(option);
}
function myFunction3(){
    var myForm = document.getElementsByTagName('form')[0];
    var option = new Option('Blackberry','Blackberry');
    myForm.elements['mySelect'].options[mySelect.length] = option;
}
</script>
</body>
</html>

Et je suis certain qu'il y a encore des dizaines d'autres manières de procéder...
Le problème est qu'elles semblent toutes justes et je suis incapable de me repérer: quelle est la bonne façon de faire ? Javascript est super simple mais je trouve que c'est vraiment le gros bordel...
Merci d'éclairer ma lanterne

PS: Désolé pour le titre mais comme il fallait 3 mots... C'est mon toc = sémantique

**SpaceFrog** · 14/11/2016, 13h21

Oui il y en a de nombreuses autres ...

Pour te répondre, je dirais, celle que tu préfères ?

**danielhagnoul** · 14/11/2016, 18h41

Celle que l'on préfère certainement, mais en évitant de se compliquer la vie inutilement.
CSS, HTML, navigateur (window, document) et JS possèdent plusieurs manières de travailler, car ils ont subi beaucoup de modifications au cours des années.
Pour JS, la dernière version majeure est ES2015 (ES6).

Ma préférence ci-dessous.
Il suffit de copier-coller le code pour le tester.
Voir mon blog pour les simplifications klog et kAddListener.

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.1.css">
  <style>
    footer {
      margin-top: 2.4rem;
    }
    button {
      margin: 1.2rem;
    }
  </style>
  <script src="https://code.jquery.com/qunit/qunit-2.0.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.2.js"></script>
  <script>
    'use strict';
    
    let
      domLoadedHandler = ev => {
        klog( `DOM ready   : ${ new kDvjhDate() }` );
 
      },
      windowLoadHandler = ev => {
        klog( `Window load : ${ new kDvjhDate() }` );
        
        const
          elemSelect = document.querySelector( '#mySelect' );
          
        kAddListener( [
          [ document.querySelector( "#btnOpt1" ), "click", ev => { elemSelect.add( new Option( "Kiwi", "Kiwi 1" ) ) } ],
          [ document.querySelector( "#btnOpt2" ), "click", ev => { elemSelect.add( new Option( "Orange", "Orange 2" ) ) } ],
          [ document.querySelector( "#btnOpt3" ), "click", ev => { elemSelect.add( new Option( "Blackberry", "Blackberry 3" ) ) } ],
        ]);
           
        // var optionElementReference = new Option([text, [value, [defaultSelected, [selected]]]])
        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option
        
        kIDUnique();
      };
      
    kAddListener( [
      [ document, "DOMContentLoaded", domLoadedHandler ],
      [ window, "load", windowLoadHandler ]
    ] );    
  </script>
</head>
<body>
  <main>
 
    <button id="btnOpt1">Ajoute option 1</button>
    <button id="btnOpt2">Ajoute option 2</button>
    <button id="btnOpt3">Ajoute option 3</button>
    <form>
      <select id="mySelect" size="8">
        <option selected>Apple</option>
        <option>Pear</option>
        <option>Banana</option>
        <option>Orange</option>
      </select>
    </form>
 
  </main>
  <footer>
    <section class="qunit">
      <div id="qunit"></div>
      <div id="qunit-fixture"></div>
    </section>
  </footer>
</body>
</html>

EDIT

Au rayon modification et nouveauté, j'ai oublié de citer les Web APIs.

**tarte-aux-fraises** · 16/11/2016, 09h57

Je viens de jeter un oeil à ton exemple mais j'ai du mal à comprendre ta syntaxe. Je n'ai vu nul part ailleurs ce sigle "=>" qui est normalement utilisé dans les tableau associatifs dans d'autres langages. Que signifie t-il en JS ?
let, je sais que c'est une porté locale, pourquoi l'utiliser dans le main ?
Et les ``, normalement utilisés en SQL afin d'éviter de confondre un champ avec un mot-clé. Ce langage produit de drôles de choses