Mettre un espace dans une liste d'options

**moimp** · 29/03/2017, 09h44

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.

**eleydet** · 29/03/2017, 16h40

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<option>&nbsp;-</option>

Et le code ci-dessous en ajoute trois.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<option>&nbsp;&nbsp;&nbsp;-</option>

**moimp** · 30/03/2017, 14h50

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var [' ', '-', '&nbsp; - &nbsp;', '.', '+', ', ']

**thelvin** · 30/03/2017, 16h09

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

**moimp** · 31/03/2017, 16h55

Fonction de création d'options:

Code javascript :

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
// 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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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]);
	}

**danielhagnoul** · 31/03/2017, 18h13

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

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
<!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>

**moimp** · 02/04/2017, 17h13

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

function makeOptions( optionValues, optionTextes = optionValues )

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

function makeOptions( optionValues, optionTextes )

et tester si la variable est définie.

Quand faut-il utiliser document.querySelector ou document.getElementById?

**danielhagnoul** · 02/04/2017, 20h50

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.

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.

**moimp** · 03/04/2017, 14h10

Merci pour tout!

Mettre un espace dans une liste d'options

JavaScript

Discussions similaires

Partager

Partager