title: How to use dropdownlist of asp.net as input-group in bootstrap
body: <p>I have a problem in adding dropdownlist in input group..</p>
  
  <p>I use this one..</p>
  
  <pre><code>&lt;div class="input-group"&gt;
   &lt;div class="input-group-btn"&gt;
    &lt;asp:DropDownList runat="server" CssClass="selectpicker form-control"&gt;
    &lt;asp:ListItem Value="Val"&gt;Item1sadfasdf&lt;/asp:ListItem&gt;
    &lt;asp:ListItem Value="Val3"&gt;Item2asdfasd&lt;/asp:ListItem&gt;
    &lt;/asp:DropDownList&gt;
   &lt;/div&gt;
  
  &lt;asp:TextBox CssClass="form-control" ID="txtSearch" runat="server"&gt;&lt;/asp:TextBox&gt;
  &lt;span class="input-group-btn"&gt;
  &lt;asp:Button CssClass="btn btn-info" runat="server" Text="Search" ID="btnSearch" OnClick="btnSearch_Click" /&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but it just give me a result like this:
  <img src="https://i.stack.imgur.com/5F9fx.png" alt="enter image description here"></p>
  
  <p>I also got a code like this..</p>
  
  <pre><code>&lt;div class="input-group"&gt;
  &lt;div class="input-group-btn"&gt;
  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;&lt;span runat="server" id="spanCategory"&gt;All Category&lt;/span&gt;&amp;nbsp&amp;nbsp&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
  &lt;ul id="myMenu" class="dropdown-menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;All Category&lt;/a&gt;&lt;/li&gt;
  &lt;li class="divider"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;JO Number&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Date&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Status&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Client Name&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Institution&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Department&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Location&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Priority&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Problem&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Remark&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Assigned&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;CITI Department&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;asp:TextBox CssClass="form-control" ID="txtSearch" runat="server"&gt;&lt;/asp:TextBox&gt;
  &lt;span class="input-group-btn"&gt;
  &lt;asp:Button CssClass="btn btn-info" runat="server" Text="Search" ID="btnSearch" OnClick="btnSearch_Click" /&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and showed me output like this..</p>
  
  <p><img src="https://i.stack.imgur.com/xU0pu.png" alt="enter image description here"></p>
  
  <p>It is what i want but the problem is that everytime i click the search button which do the post back, it just change the value into a default value which is the "All Category" value.. The value is just change through jQuery but everytime a postback is done the value back to default so i decided to use dropdownlist which retain its value even if there is a post back happen.. but the design is not that good..</p>
  
  <p>How to make it same as the design i liked.. Thank you so much</p>