Style ASP.NET Drop-Down List with Bootstrap

Question

1.60/5 (2 votes)

See more:

hi Members,

I have tried to style my dropdown list using bootstrap but have no idea why nothing has changed when I run the web.

This is my code:

ASP.NET

//aspx file
<script src="JS/jquery.min.js"></script>
<script src="JS/bootstrap-select.js"></script>
<script src="JS/bootstrap.min.js"></script>
<link href="Bootstrap/bootstrap.css" rel="stylesheet" />
<link href="Bootstrap/bootstrap-select.css" rel="stylesheet" />
<link href="Bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.0.min.js"></script>
<script src="Scripts/bootstrap-select.min.js"></script>
<link href="Content/bootstrap-select.min.css" rel="stylesheet" />

<script type="text/javascript">

    $(document).ready(function () {
        $('#<%=NewDropDownList.ClientID%>').click(function () {
                var str = "";
                $("#<%=NewDropDownList.ClientID%> option:selected").each(function () {
                    str += $(this).val(); // OR .text() if needed
                });
                alert(str);
            });
        });

</script>

<asp:Dropdownlist ID="NewDropDownList" runat="server" Width="136px" AutoPostBack ="True" AppendDataBoundItems="true" EnableViewState="true" ViewStateMode="Enabled" CssClass="selectpicker"> 
</asp:Dropdownlist>

Appreciate if someone can help me on this/recommend me ways to style the dropdownlist, thanks.

Posted 25-Oct-15 22:53pm

Member 11999641

Updated 1-Jan-17 18:56pm

v2

Add a Solution

Comments

Amit Jadli 26-Oct-15 5:09am

Have you initialized your dropdown list with select picker with this line?

$('.selectpicker').selectpicker();

Andy Lanng 26-Oct-15 5:24am

oh really? have I been doing it the hard way all this time >_<
(solution below is how I do it)

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andy Lanng · Answer 1 · 2015-10-25T23:22:00

First: The javascript won't work. Asp controls have a unique "ClientID" which will look like c100$form1$mycontrol$DropDownList.
You can use a selector to get the control instead:

JavaScript

var dropDown = $('selector[id$='DropDownList']);

The "selector" is the control type when rendered (you can see this by viewing the source)
inside the square brackets is where you define attributes. In this case we are looking at the "id".
The operator $= means "ends with" so you can see how this handles the ClientId issue.

There are other ways such as using ASP to get the actual ID:

JavaScript

var clientId = <%= DropDownList.ClientID %>
var dropDown = $('#'+clientId );

It's your choice.

(I just realized that I've been an asp developer for 7 years and I hardly ever use ASP code ^_^)

As for the bootstrap styling. I always create myself a swatch page for every project. It helps me see how the controls will look when I create a new theme. There are plenty online swatches such as:
https://bootswatch.com/cerulean/[^]

The theme doesn't matter because the implementation is always the same (the beauty of bootstrap)

Find the control like the one you're trying to style and view source (or inspect element if it's available)

If this case, the control is styled as follows:

HTML

<div class="form-group">
                    <label for="select" class="col-lg-2 control-label">Selects</label>
                    <div class="col-lg-10">
                      <select class="form-control" id="select">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                      </select>
                      <br>
                      <select multiple="" class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                      </select>
                    </br></div>
                  </div>

From <select></select> to is your asp:dropdownlist. Don't worry, that is how it renders on the page in html ^_^

The ID will not be so simple. If you want to join your label then you will have to use the asp ClientId to get the rendered id, or omit the "for" altogether.

I have a custom control that overrides the "Render" method and writes the label and wrapper div out automatically, but that can be a bit too fiddly.

I hope that helps. Let me know if you need any more help ^_^
Andy

Amit Jadli · Answer 2 · 2015-10-26T00:59:00

Solution 2

Please use this way..

First of all you need to add link of bootstrap.css in your code..you didnt added in your code..

Tested your code as bootstrap-select plugin does not need any initialization..you just need to add selectpicker class...

then below code:

JavaScript

$(document).ready(function () {
            $('#<%=DropDownList.ClientID%>').change(function () {
                var str = "";
                $("#<%=DropDownList.ClientID%> option:selected").each(function () {
                    str += $(this).val(); // OR .text() if needed
                });
                alert(str);
            });
        });

Posted 26-Oct-15 0:59am

Amit Jadli

Updated 26-Oct-15 1:13am

v2

Comments

Member 11999641 27-Oct-15 10:11am

hi Amit Jadli, thanks for your reply, have tried this method but still get the same result. Please see my updated post thanks!

Amit Jadli 28-Oct-15 0:50am

You are using wrong order of js libraries,
You had also included jquery library twice in that page.

Use this ordering of libraries..

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-select.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-select.js"></script>

Style ASP.NET Drop-Down List with Bootstrap

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us