Bootstrap Snippet School Year Selector using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>School Year Selectors</h2>
    </div>
<div class="col-xs-6">
<h3>DENBYC</h3>
<div class="dropdown dropdownContainer">
<a id="ddSchoolYear" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="#">
--All--20152016<i class="caret"></i>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="divider divider2"><a href="#" onClick="SYChoose(this);" data-schoolyear="%-20162017">20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="AHS-20162017">Atikokan - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="FFHS-20162017">Fort High - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="RRHS-20162017">Rainy - 20162017</a></li>
<li class="divider"></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="AHSE-20162017">AtikokanE - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="CRS-20162017">Crossroads - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="DYS-20162017">Donald Young - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="FHSI-20162017">Fort High Int. - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="MTS-20162017">McCrosson - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="MCS-20162017">Mine Centre - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="RMS-20162017">Moore - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="NFS-20162017">Nestor Falls - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="NSC-20162017">North Star - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="RPS-20162017">Riverview - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="SCS-20162017">Sturgeon - 20162017</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="JWW-20162017">Walker - 20162017</a></li>
<li class="divider divider2"><a href="#" onClick="SYChoose(this);" data-schoolyear="%-20152016">20152016</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="AHS-20152016">Atikokan - 20152016</a></li>
<li><a href="#" onClick="SYChoose(this);" data-schoolyear="FFHS-20152016">Fort High - 20152016</a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
.divider2 {height: 25px!important}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
function SYChoose(a){
    var aText=$(a).text();
    if ($(a).parent().hasClass("divider2")){
        aText="--All--" + aText;
    }
    $(a).parent().closest(".dropdownContainer").find(".btn").first().html(aText + "<i class='caret'></i>");
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"School Year Selector"
Bootstrap 3.3.0 Snippet by cdenby

Related: See More

Questions / Comments:

"School Year Selector" Bootstrap 3.3.0 Snippet by cdenby

Related: See More

Questions / Comments:

"School Year Selector"
Bootstrap 3.3.0 Snippet by cdenby