<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 id="port" class="form-group">
<label for="interface">Interface:</label>
<select id="interface" name="interface" class="form-control" required="" style="border-color: red;">
<option value="">Select Interface</option>
</select>
</div>
<p><a href="https://www.w3schools.com" id="w3s" name="">W3Schools.com</a></p>
<button id="test">Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
<button id="reset">Reset</button>
<div id="result"></div>