ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學 線上教程 教學影片

2014-12-01

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

摘要:[筆記]下拉式選單 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
 
<select>
    <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
    <option value="saab"  style="background-image:url(images/saab.png);">Saab</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 範例修正與下載)

 

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="/Content/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="/Content/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="/Scripts/jquery-1.11.1.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
 
    <!-- **** 本範例必須加入以下的檔案，才能生效。********************************************** -->
    <!-- Custom styles for this template -->
    <link href="/Scripts/theme.css" rel="stylesheet">
 
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/Scripts/ie-emulation-modes-warning.js"></script>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
 
 
HTML的 <body>內容如下 
 
      <div class="page-header">
        <h1>Dropdown menus</h1>
      </div>
 
      <div class="dropdown theme-dropdown clearfix">
        <a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
 
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <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" class="divider"></li>   <!-- 分隔線 -->
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
              <li role="presentation"><img src="Images_Book\bmw.jpg" /></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 約 135hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

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

 (1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


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

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

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

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了！MIS2000Lab.主講   事先錄好的影片，並非上課側錄！   觀看時，有如「一對一」面對面講課。

 

 

 

贊助商連結

BloggerAds

本頁段落