Discussion :

[Maljuna Kris]

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

Code :

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

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 ?

[Maljuna Kris]

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 :

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

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.

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

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 :

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

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.
@+

[peperey]

Tu peux essayer de passer par l'attribut "multiple"

Code :

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

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: Au temps pour moi, je n'avais pas vu le début.... chez moi çà marche correctement, changer l'attribut multiple me change le select...

[FremyCompany]

Code :

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

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

Me semble un peu bizarre ce test...

Code :

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

if (leSelect.tagName.toLower="select"

Et sinon, tu peux tester :

Code :

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

setAttribute("multiple","on")

[Maljuna Kris]

Je vous le confirme, l'attribut DOM `multiple` n'est accessible qu'en lecture.
Merci tout de même pour votre sollicitude.

[SpaceFrog]

pas tout à fait vrai ...


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

Code :

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

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 :

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

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

[FremyCompany]

Code :

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

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 :

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

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 :

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

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)

[SpaceFrog]

Code :

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

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

[FremyCompany]

Ok, vu comme ca

Mais de toute facon, multiple marche sous IE7

Au fait, voici ma page de test :

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