[DOM] [javascript] modification de l'attribut 'multiple' d'un <select>

Version imprimable

Saluton,
Avec le code suivant le <select> demeure en 'multiple' :

Code:

1
2
3
4
5
6
7
8
9
10
11
function montre(table,liste,vider){
    cache();
    if(document.formsql.bascule.value=='select'){
        document.getElementsByName(liste).multiple=true;
        }
    else{
        document.getElementsByName(liste).multiple=false;        
        }
    vide(liste);
    document.getElementById(table).style.display='block';
    }

L'attribut 'multiple' d'une <select> est-il modifiable en javascript, et si oui, comment ?

Quelques heures plus tard, apr�s un tour � la FNAC o� j'ai fait l'acquisition du livre d'�ric Sarrion 'Pratique de CSS et JavaScript', je sais maintenant que la classe objet DOM Select comporte un attribut 'type' qui peut prendre la valeur 'select-multiple' ou 'select-one'.
Ce qui ne change pas grand chose � mon probl�me, le code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function montre(table,liste,vider){ cache(); alert(document.getElementsByName(liste).multiple); if(document.formsql.bascule.value=='select'){ document.getElementsByName(liste).type='select-multiple'; } else{ document.getElementsByName(liste).type='select-one'; } vide(liste); document.getElementById(table).style.display='block'; }
ne se montrant pas plus efficient que le pr�c�dent.
Si quelqu'un a une piste, je suis preneur.
Merci.

19/12/2006, 15h35
Maljuna Kris

Bon, h� bien il semble que cette propri�t� ne soit accesible qu'en lecture :
la console javascript de Firefox vient de me retourner le message suivant :

Citation:

setting a property that has only a getter
http://localhost/requeteur/Maquette/fonctions.js line 106

et la ligne 106 c'est celle-l� :

Code:

document.getElementById(liste).type='select-one';

�a veut dire que je vais devoir charger deux exemplaires de chaque <select> l'un en select-multiple l'autre en select-one et masquer et/ou afficher l'un ou l'autre en fonction des besoins. C'est vraiment bourrin.
Bon, si personne n'a mieux je mettrai ce post en RESOLU demain.
@+
19/01/2007, 11h16
peperey
Tu peux essayer de passer par l'attribut "multiple"
Code:

1 2 3 4 5 6 7 if(document.formsql.bascule.value=='select'){ document.getElementsByName(liste).multiple=true; } else{ document.getElementsByName(liste).multiple=false; }
D�sol� si c'est trop tard mais bon, �a servira � d'autres...

edit: :oops: Au temps pour moi, je n'avais pas vu le d�but.... chez moi �� marche correctement, changer l'attribut multiple me change le select...
19/01/2007, 11h51
FremyCompany

Code:

if(document.formsql.bascule.value=='select'){

Me semble un peu bizarre ce test...

Code:

if (leSelect.tagName.toLower="select"

Et sinon, tu peux tester :

Code:

setAttribute("multiple","on")
19/01/2007, 14h17
Maljuna Kris

Je vous le confirme, l'attribut DOM `multiple` n'est accessible qu'en lecture.
Merci tout de m�me pour votre sollicitude.
25/04/2008, 14h18
SpaceFrog

pas tout � fait vrai ...

on peut modifier le multiple comme dit pr�c�demment :

Code:

document.myform.myselect.multiple=1

ou au moment de la creation de l'objet tout comme pour le name de radios, select et checkboxe faire comme ceci:

Code:

document.createElement('<select name="foo" multiple >')

Citation:

Envoy� par SpaceFrog

Code:

document.createElement('<select name="foo" multiple >')

Ce n'est pas standard. Ca passe sous FF, Op�ra et Safari, �a ?

Sinon, ce qu'on peut faire, c'est le remplacer via outerHTML sous IE.
Code:

1 2 3 4 // Enlever l'attribut MULTIPLE : select.outerHTML = select.outerHTML.replace(/multiple(=[^ ]*/i,"") // En ajouter un : select.outerHTML = select.outerHTML.replace(/\>/, multiple="true"')
Par contre, ce n'est viable � % que si ceci return true (jamais test�) ou que le SELECT est toujours recherch� via ID :
Code:

1 2 3 4 var select = ...; select.id = "theSelectID"; var theSelect2 = select; select.outerHTML=select.outerHTML.replace(/multiple/i, 'oldMultiple'); return (select == theSelect2) && (document.getElementById('theSelectID') == select)

Code:

1
2
3
4
5
6
7
var isIE=(document.all)?true:false;
Elt=(isIE)?('<select name="foo"  multiple >'):'select';
 
var Sel =document.createElement(Elt);
if(!isIE){ Sel.name="foo";
               Sel.multiple=1;
            }

Ok, vu comme ca ;)

Mais de toute facon, multiple marche sous IE7

Au fait, voici ma page de test :

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>OuterHTML and Element's presevation</title>
        <script><!--
        
        // Change outerHTML if faillure
        function makeMultiple(id) {
            var s = document.getElementById('s1'); var i = s.selectedIndex;
            var sSave = document.getElementById('s1');
            try {
                s.setAttribute("mutiptle", "true");
                s.multiple=true;
            } catch (ex) {
                s.outerHTML=s.outerHTML.replace('>','multiple="true">');
            } finally {
                s.selectedIndex = i;
            }
            
            alert ((s == sSave) && (document.getElementById(id) == s));
        }
        
        function makeSingle(id) {
            var s = document.getElementById('s1'); var i = s.selectedIndex;
            var sSave = document.getElementById('s1');
            try {
                s.setAttribute("mutiptle", "false");
                s.multiple=false;
            } catch (ex) {
                s.outerHTML=s.outerHTML.replace(/multiple(=[^ ]*)?/i,'');
            }
            
            alert ((s == sSave) && (document.getElementById(id) == s));
        }
        
        // Replace element if faillure
        function makeMultiple2(id) {
            var s = document.getElementById('s1'); var i = s.selectedIndex;
            var sSave = document.getElementById('s1');
            try {
                s.setAttribute("mutiptle", "true");
                s.multiple=true;
            } catch (ex) {
                s = document.createElement('<select multiple="true" id="'+id+'">');
                s.innerHTML = sSave.innerHTML;
                sSave.replaceChild(s, sSave);
 
            } finally {
                s.selectedIndex = i;
            }
            
            alert ((s == sSave) && (document.getElementById(id) == s));
        }
        
        function makeSingle2(id) {
            var s = document.getElementById('s1'); var i = s.selectedIndex;
            var sSave = document.getElementById('s1');
            try {
                s.setAttribute("mutiptle", "false");
                s.multiple=false;
            } catch (ex) {
                s = document.createElement('<select multiple="false" id="'+id+'">');
                s.innerHTML = sSave.innerHTML;
                sSave.replaceChild(s, sSave);
            }
            alert ((s == sSave) && (document.getElementById(id) == s));
        }
        
        --></script>
        <style><!--
            select { display: block; width: 300px; }
            button { width: 150px; padding: 0px; margin: 0px; }
        --></style>
    </head>
    <body>
        <select id="s1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <button onclick="makeMultiple('s1');">Multiple</button>
        <button onclick="makeSingle('s1');">Unique</button><br/>
        <button onclick="makeMultiple2('s1');">Multiple (2)</button>
        <button onclick="makeSingle2('s1');">Unique (2)</button><br/>
    </body>
</html>