Bootstrap Snippet Javascript Select and Change using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>Javascript Select and Change</h2>
        
        <form>
            <div class="dropdown">
                <select class="dropdown-select-version select" name="options">
                    <option> Architecture </option><option value="x86">x86</option>
                    <option value="x64">x64</option>
                </select>
            </div>
            <a class="btn btn-block btn-success download-target" title="Download" href="#" alt="Download">Download</a>
        </form>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.select,
.download-target {
  width: 20em;
}
.select {
  position: relative;
  display: block;
  height: 3em;
  line-height: 3;
  background: #2c3e50;
  overflow: hidden;
  border-radius: .25em;
  display: inline-block;
  display: -webkit-inline-box;
  border: 1px solid #667780;
  margin: 1em 0;
}
select {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 .5em;
  color: #fff;
  cursor: pointer;
}
select::-ms-expand {
  display: none;
}
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 1em;
  background: #34495e;
  pointer-events: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
$('.dropdown-select-version').on('change', function() {
    if (this.value == 'x86') {
        $('.download-target').attr({ 'href': 'http://dl.dracos-linux.org/download.php?file=i686/dracOs-i686-2.0.iso' });
    }else if (this.value == 'x64') {
        $('.download-target').attr({ 'href': 'http://dl.dracos-linux.org/download.php?file=x86_64/dracOs-x86_64-2.0.iso' });
    }else {
        $('.download-target').attr({'href': '#'}); 
    } 
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Javascript Select and Change"
Bootstrap 3.3.0 Snippet by agusmakmun

Related: See More

Questions / Comments:

"Javascript Select and Change" Bootstrap 3.3.0 Snippet by agusmakmun

Related: See More

Questions / Comments:

"Javascript Select and Change"
Bootstrap 3.3.0 Snippet by agusmakmun