[筆記]下拉式選單 DropDownList的子選項Item (ListItem)改用圖片

2014-12-01

摘要:[筆記]下拉式選單 DropDownList的子選項Item (ListItem)改用圖片
Bootstrap也有類似的解法，比較簡單

上一篇文章

[筆記]下拉式選單 DropDownList的群組(Group) & HTML5的 optgroup

如果要在下拉式選單（DropDownList）、清單控制項的子選項（ListItem）

加入圖片與文字，該怎麼作？

找到幾篇相關的文章，為自己做筆記：

這幾個方法，都是加入CSS來完成。

例如：

DropdownList Item With Custom Icon Image In ASP.NET Using C#.Net

http://www.aspdotnet-pools.com/2014/09/dropdownlist-item-with-custom-icon.html

putting images with options in a dropdown list

http://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list

<option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>

</select>

可以透過 .Attributes.Add()方法，加入 style=" "

只有 Firefox瀏覽器有效果

下面的方法，是用jQuery的 .ddslick()來做

http://designwithpc.com/Plugins/ddSlick

http://www.jquerybyexample.net/2012/05/how-to-add-images-in-dropdown-list.html

其他作法：

DropDownList的選項、圖片，都放在DB的資料表裡面

http://www.c-sharpcorner.com/UploadFile/9f0ae2/Asp-Net-bind-dropdownlist-with-images/

...........................................................................................................................................

在RWD（Bootstrap）裡面，也有類似的作法

簡潔而且輕鬆

請看：http://getbootstrap.com/examples/theme/

請在HTML表頭裡面，加入這些

請參考

簡單的Bootstrap效果(v 3.0.0 / v 3.2.0版)與入門教學 (#2 範例修正與下載)

<!--[if lt IE 9]>

<![endif]-->

HTML的 <body>內容如下

<h1>Dropdown menus</h1>

</div>

<a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

<li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>

</ul>

</div>

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學，遠距教學 (Web Form 約51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學，遠距教學 (ASP.NET MVC 約75~88hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

ASP.NET MVC線上課程第一天免費看 (5.5小時)

寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.台灣 或 school (at) mis2000lab.net

ASP.NET遠距教學、線上課程（Web Form + MVC）。 第一天課程， "完整" 試聽。

................ facebook社團 https://www.facebook.com/mis2000lab ......................

................ YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

Blog文章 "附的範例" 無法下載，請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍（嚴格認定）。

......................................................................................................................................................