Javascript function does not work when I add this code to my html form class="form-control select2". If I remove the select2 now that becomes class="form-control", it will run. How do I make the function work by including the select2? Any help would be gladly appreciated. Thanks. Here is the code below:

<html>
<head>
<title>Some Title</title>
<!-- some css and plugin links here -->
</head>
<body>
<div class="col-md-6">
<div class="form-group">
<label for="reg_track" class="col-sm-2 control label">Track</label>
<div class="col-sm-7">
<select name="reg_track" id="reg_track" class="form-control select2"  onclick="getStrand()" required>
<option selected>Select Track</option>
<option value="Academic">Academic</option>
<option value="Arts and Design">Arts and Design</option>
<option value="TVL">TVL</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="reg_strand" class="col-sm-2 control-label">Strand</label>
<div class="col-sm-7">
<select name="reg_strand" id="reg_strand" class="form-control select2" required>
</select>
</div>
</div>
</div>

<!-- some bootstrap and js links -->
<!-- here's the script -->
<script>
$(function () {
//Initialize Select2 Elements
$('.select2').select2()
});

//the function that I've created
function getStrand(){
var track = document.getElementById("reg_track");
var strand = document.getElementById("reg_strand");
var selected_track = track.options[track.selectedIndex].value;

var academic_strands = ["ABM","GA","HUMSS","STEM"];

if(selected_track=="Academic"){
strand.options.length = 0;
for(i=0;i<academic_strands.length;i++){
strand.options[i] = new Option(academic_strands[i]);
}

}
} 

</script>
</body>
</html>

0 Answers