[JS] Come creare/avere select dinamiche

Buonasera,
oggi sono tornato su questo sito per creare una barra di caricamento e cliccando sulla select ho notato che al posto di visualizzare i titoli (come qualche tempo fa) vengono visualizzate direttamente le immagini...

Questo è l'effetto che da tempo sto cercando...sapreste mica dirmi come si chiama?

Il sorgente è questo:

Codice:

---

function ALmakeMenu() {
        var types = $('type').getElementsByTagName('option');
        var typesL = types.length;
       
        var div = domEl('div','',[['id','typelist']]);
       
        for(var i=0;i<typesL;i++) {
                var img = domEl('img','',[['src','images/exemples/'+types[i].value+'.gif'],['alt',types[i].text]]);
                var a = domEl('a',img,[['href','javascript:ALuseType('+types[i].value+')'],['title',types[i].text]],div);
        }       
        $('type').parentNode.insertBefore(div,$('type'));
       
        domEl('div','',[['id','layer']],$('type').parentNode);
       
        $('layer').onclick = function() {
                this.blur;
                $('typelist').style.display = 'block';
                document.onclick = function() {
                        document.onclick = function() {
                                $('type').style.display = '';
                                $('typelist').style.display = '';
                                document.onclick = null;
                        }
                }
        }       
}

---

File: http://www.ajaxload.info/js/script.js
Dubito che esista! ^^ Ciauuuuu! ;D

Ma non basta utilizzare un pò di CSS?
Al momento mi viene in mente questo, forse mi sbaglierò:

Codice HTML:

---

<select>
<option style="background: #fff url(loading.gif)  no-repeat center">Loading 1</option>
</select>

---

Citazione:

---

Originalmente inviato da sIM

Il sorgente è questo:

Codice:

---

function ALmakeMenu() {
        var types = $('type').getElementsByTagName('option');
        var typesL = types.length;
       
        var div = domEl('div','',[['id','typelist']]);
       
        for(var i=0;i<typesL;i++) {
                var img = domEl('img','',[['src','images/exemples/'+types[i].value+'.gif'],['alt',types[i].text]]);
                var a = domEl('a',img,[['href','javascript:ALuseType('+types[i].value+')'],['title',types[i].text]],div);
        }       
        $('type').parentNode.insertBefore(div,$('type'));
       
        domEl('div','',[['id','layer']],$('type').parentNode);
       
        $('layer').onclick = function() {
                this.blur;
                $('typelist').style.display = 'block';
                document.onclick = function() {
                        document.onclick = function() {
                                $('type').style.display = '';
                                $('typelist').style.display = '';
                                document.onclick = null;
                        }
                }
        }       
}

---

File: http://www.ajaxload.info/js/script.js
Dubito che esista! ^^ Ciauuuuu! ;D

---

Si lo avevo visto anch'io, ma utilizzando questo codice javascript con quanto segue non accade nulla...comunque visualizzo i nomi:

Codice PHP:

---

<select id="type" name="type" onchange="Style(this.value)"><option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<option value="004">004</option>
<option value="005">005</option>
<option value="006">006</option>
<option value="007">007</option>
<option value="008">008</option>
<option value="009">009</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="012">012</option>
<option value="013">013</option>
<option value="014">014</option>
<option value="015">015</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
<option value="020">020</option>
<option value="021">021</option>
<option value="022">022</option>
<option value="023">023</option>
</select>


---

Citazione:

---

Originalmente inviato da nokiagames

Ma non basta utilizzare un pò di CSS?
Al momento mi viene in mente questo, forse mi sbaglierò:

Codice HTML:

---

<select>
<option style="background: #fff url(loading.gif)  no-repeat center">Loading 1</option>
</select>

---

---

Come puoi ben vedere è tutto una questione di JavaScript...

Citazione:

---

Originalmente inviato da miki92

Si lo avevo visto anch'io, ma utilizzando questo codice javascript con quanto segue non accade nulla...comunque visualizzo i nomi:

---

perchè con solo quel codice non te ne fai nulla, ti manca il framework che usano loro.