Mettre un espace dans une liste d'options

Version imprimable

29/03/2017, 09h44
moimp

Mettre un espace dans une liste d'options

Bonjour,
J'ai un script codé en utf-8.
Dans une liste de choix de séparateurs, je voudrais créer une option ' - ' (notez l'espace de chaque côté du trait d'union).
J'ai essayé ceci:
' - '
'\u20-\u20'
'\u0020-\u0020'
'\u0020 - \u0020'
Certaines de ces écritures plantent le script, les autres affichent '-' sans les espaces.
29/03/2017, 16h40
eleydet

Bonjour,

Une liste de choix de séparateurs... avec les balises <select> et <option>? J'ai testé avec FireFox. Le code ci-dessous ajoute un espace.

Code:

<option> -</option>

Et le code ci-dessous en ajoute trois.

Code:

<option>   -</option>
30/03/2017, 14h50
moimp

Oui, merci mais ça ne fonctionne pas si j'écrit cette chaîne en variable JS comme ceci:

Code:

var [' ', '-', '  -  ', '.', '+', ', ']
30/03/2017, 16h09
thelvin

Hum. On peut voir un exemple qui ne plante pas le script ?

Fonction de création d'options:

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
// Création d'une liste d'options pour balises select
function makeOptions(optionValues, optionTextes) {
	optionTextes = typeof optionTextes === 'undefined' ? optionValues: optionTextes;
	var options = [];
	var text, i;
	var max = optionValues.length;
 
	for (i=0; i<max; i++) {
		if (optionValues[i] == 'optgroup') {
			// A mettre au point
			//options[i] = document.createElement('optgroup');
			//options[i].label = optionValues[i+1];
			// Lien parent non défini
			//options[i].parentNode.insertBefore(options[i], options[i+1]);
		}
		else {
			text = document.createTextNode(optionTextes[i]);
			options[i] = document.createElement('option');
			options[i].value = optionValues[i];
			options[i].appendChild(text);
		}
	}
	return options;
}

Code appelant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	// Ajout d'un séparateur de champ (si fieldNb >0)
	if (fieldNb > 0) {
		insSep[lineNb][fieldNb] = document.createElement('select');
		insSep[lineNb][fieldNb].id = 'insSep['+lineNb+']['+fieldNb+']';
		insSep[lineNb][fieldNb].setAttribute('name', 'insSep['+lineNb+']['+fieldNb+']');
		insSep[lineNb][fieldNb].style.minWidth = 'initial';
		insSep[lineNb][fieldNb].style.maxWidth = '2em';
		arrSep = makeOptions([' ', '-', '\u0020-\u0020', '.', '+', ', ']);
		xMax = arrSep.length;
		for (let i=0; i<xMax; i++) {
			insSep[lineNb][fieldNb].appendChild(arrSep[i]);
		}
		insSep[lineNb][fieldNb].selectedIndex = 0;
		cell.appendChild(insSep[lineNb][fieldNb]);
	}

Pour moi, mon code de test ci-dessous, cela fonctionne :

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
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
<!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, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script>
    'use strict';
    
    // Création d'une liste d'options pour balises select
    function makeOptions( optionValues, optionTextes = optionValues ){      
      let
        options = [],
        max = optionValues.length;
        
      for ( let i = 0; i < max; i++ ){
        options[ i ] = document.createElement( 'option' );
        options[ i ].value = optionValues[ i ];
        options[ i ].appendChild( document.createTextNode( optionTextes[ i ] ) );
      }
      
      return options;
    }    
    
    document.addEventListener( 'DOMContentLoaded', ev => {
      
    }, false );
    
    window.addEventListener( 'load', ev => {
      const
        mySelect = document.querySelector( "#mySelect" );
      
      let
        arrSep = makeOptions( [ "testr1", ' ', '-', '\u0020-\u0020', '.', '+', ', ', "test2" ] );
              
      for ( let opt of arrSep ){
        mySelect.appendChild( opt );
      }
      
      mySelect.addEventListener( "change", ev => {
        console.log( mySelect.value );
      }, false );
      
    }, false );
  </script>
</head>
<body>
  <main>
 
    <select id="mySelect"></select>
 
  </main>
</body>
</html>

02/04/2017, 17h13
moimp

Eh non, ton code donne le même résultat que le mien, bien qu'il soit beaucoup plus élégant.
En fait, les espaces de chaque côté du tiret n'apparaissent pas dans le texte de l'option. Mais j'ai trouvé, il suffit de remplacer l'espace par un espace insécable en le codant '\u00A0' et non pas ' ' comme je l'avais fait initialement mais je ne comprends pas vraiment pourquoi.

Mon problème de départ est résolu mais avant de le marquer comme tel, j'ai quelques remarques:

L'écriture:

Code:

function makeOptions( optionValues, optionTextes = optionValues )

n'est pas accepté par IE.
Il faut la remplacer par

Code:

function makeOptions( optionValues, optionTextes )

et tester si la variable est définie.

Quand faut-il utiliser document.querySelector ou document.getElementById?
02/04/2017, 20h50
danielhagnoul

Citation:

L'écriture:function makeOptions( optionValues, optionTextes = optionValues ) n'est pas accepté par IE.

Je travaille uniquement avec les navigateurs compatibles à plus de 90 % avec le JS d'aujourd'hui (ES2015).

Voir : ECMAScript compatibility table.

j'utilise Chrome, Firefox et Edge.

Si vous devez être compatible avec les navigateurs IE8+, il faut convertir le code ES2015 en ES5 avec Babel.

Citation:

Quand faut-il utiliser document.querySelector ou querySelectorAll() ?

Toujours, car ils utilisent les mêmes sélecteurs que jQuery et le CSS.

querySelector() est disponible depuis IE8.
querySelectorAll() est disponible depuis IE9.
03/04/2017, 14h10
moimp

Merci pour tout!