You can use a selector to get the control instead:
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:
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:
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:
<label for="select" class="col-lg-2 control-label">Selects</label>
<select class="form-control" id="select">
<select multiple="" class="form-control">
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 ^_^