Html select etiketi açılır kapanır listeler sayesinde çok uzun bölümleri ufak bir çerçeveye sığdırmanıza yarayan bir etikettir. Genelde üyelik aşamalarında ülke ve şehir seçimi bölümlerinde kullanılır. Görüntüsü birçok web sitesinde aynıdır ve tasarım açısından güzel bir görüntüye sahip değildirler. Ama bazı geliştiriciler tarafından yapılmış olan bir kaç tane uygulama sayesinde bu html etiketinin görüntüsünü değiştirebilir ve hatta daha fazla özellik ekleyebilmemiz mümkündür. 

 Prashant Chaudhary  tarafından yapılmış olan DDSlick uygulaması ile bu Html option etiketinin görütüsünü dğeiştirebilir ve içinde listelenmiş olan elemanların yanına ikonlar ekleyebilmemiz mümkün.

Option elementi içerisinde bulunan  seçenekler genelde  hangi  siteye  bakarsanız  aşağıdaki  demo gibidir.

Eklenti kullanılmadan oluşturulmuş bir seçenek  belirleme kutusu.

 <select> <option> </option> </select>

Mintik.com bu kısım sadece bir demoTwitterLinkedInFoursquare

• Eklentinin kullanımı  hakkında daha fazla bilgiye   DesignWithPc adresinden ulaşabilirsiniz.

Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler.

Js dosya adresleri : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/ddslick.js"></script>
<script type="text/javascript" src="js/jSon.js"></script>

Yukarıdaki  kodlar  içerisine  eklemiş  olduğum jSon.js dosyası boş  daha doğrusu  öyle  bir  dosya  yok bu dosyayı  kendiniz  oluşturacaksınız. Herhangi  bir  isim  verebilirsiniz.

Oluşturacağınız jSon.js  dosyası  içerisine  eklemeniz  gereken kodlar :

//Drop Down acilir  kutu jSon bolumu
var ddData = [
	{
		text: "Mintik.com",
		value: 1,
		description: "Buraya Aciklama Giriniz",
		imageSrc: "img/iconmintik.png"
	},
	{
		text: "Facebook.com",
		value: 1,
		description: "Buraya Aciklama Giriniz",
		imageSrc: "img/iconfacebook.png"
	},
	{
		text: "Twitter.com",
		value: 2,
		description: "Buraya Aciklama Giriniz",
		imageSrc: "img/icontwitter.png"
	},
	{
		text: "LinkedIn.com",
		value: 3,
		description: "Buraya Aciklama Giriniz",
		imageSrc: "img/iconlinkedin.png"
	},
	{
		text: "Digg.com",
		value: 4,
		description: "Buraya Aciklama Giriniz",
		imageSrc: "img/icondigg.png"
	}
];

JavaScript : 

<script type="text/javascript">
	$(document).ready(function() {
		$('#AcilirKutu').ddslick({
			data: ddData,
			width: 300,
			imagePosition: "left",
			selectText: "Favori Sitenizi Secin",
			onSelected: function(data){
			}
		});
	});
</script>

•  Body  etiketleri arasına eklemeniz  gereken bölüm.

Html : 

<article>
	<div id="AcilirKutu"></div>
</article>