應學校領導要求，要給後臺管理系統新增一個搜尋功能，提供可選擇選項。我選擇使用DropDownList去實現，熟悉.net控制元件的都知道，DropDownList的樣子非常醜，不論是邊框長寬還是裡面的下拉三角形，都給人很不舒服的感覺，作為一個愛美的女生，怎麼可能容忍呢！！！然後就開始各種查資料找解決方法，先貼沒有美化的樣子

下拉框的長度是根據選擇項里長度最大的文字決定的，這樣真的很醜有沒有！

下面是程式碼，

<liclass="list-group-item">
                @{
                    if (@ViewBag.key !="")
                    {
                        <inputtype="text" name="key" 
 
[email protected]="form-control no-padding-hr" style="border-radius:0;" />
                    }
                    else
                    {
                        <inputtype="text" name="key" placeholder="請輸入待搜尋單位名稱..." class="form-control no-padding-hr"style="border-radius: 0;" />
                    }
                }
           </li>
 
           <li class="list-group-item">
                @Html.DropDownListFor(model=> model.CompanyNature, ViewBag.CompanyNature asIEnumerable<SelectListItem>)
           </li>
 
           <li class="list-group-item">
                @Html.DropDownListFor(model=> model.CompanyBusiness, ViewBag.CompanyBusiness asIEnumerable<SelectListItem>)
               
           </li>
 

我們並不能直接在這裡面給它設定樣式

在網上找解決方法，有些建議直接用<select  class=””></select>標籤，這樣的話選擇項就要直接在這個標籤中手動寫選擇項，而且要改動的也比較打；還有些呢是直接進入.js檔案去改樣式，但是對於我這樣的新手來說，這個好像不太可行。

然後我在頁面中審查元素髮現它生成的Html程式碼實際上還是Select

所以我就想到既然不能直接簡單粗暴的新增樣式，那能不能通過jQuery去給<select>標籤新增樣式呢，想到就試一下

很簡單的加了兩三行程式碼

$(document).ready(function(){

           $('select').addClass("form-control");

       });

在頁面載入的時候就為select標籤新增名為form-control的樣式

BootStrap是個簡直不能更讚的東西了，用BootStrap寫出來的頁面簡潔美觀漂亮，它給提供了很多類可以通過引用

上面使用的form-control就是BootStrap類庫中提供的，最後效果如下

這樣就舒服多了有沒有，整齊美觀，實現方法也很簡單

如果還想要更美的效果，比如顏色設定等等，可以自己寫一個樣式，然後用同樣的方法加上就好了。（當我實現的那一刻簡直開心到不行！）