[JS] Come creare/avere select dinamiche

[miki92]

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:

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

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

[miki92]

Il sorgente è questo:

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:

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

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

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

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

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.