Click here to Skip to main content
15,920,708 members
Please Sign up or sign in to vote.
1.60/5 (2 votes)
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
Updated 1-Jan-17 18:56pm
v2
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)

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
 
Share this answer
 
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);
            });
        });
 
Share this answer
 
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>

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900