$("#frmStudent_filterby").on("change", filterStudent);
function filterStudent() {
var elementVal = $(this).val();
$("#frmStudent_search").removeAttr("placeholder pattern title maxlength");
switch (elementVal) {
case '1':
$("#frmStudent_search").attr({
"type": "search",
"placeholder": "Last, First or Last or First",
"pattern": "[a-zA-Z][A-Za-z' .,-]{0,100}$",
"title": "A-Z, space, dash, apostrophe, period, comma - no other special characters",
"maxlength": 100,
"disabled": false,
"readonly": false,
"required": true
}).datepicker("destroy").val("");
break;
case '2':
$("#frmStudent_search").attr({
"type": "text",
"placeholder": "mm/dd/yyyy",
"pattern": "",
"title": "Allows date value format mm/dd/yyyy only",
"maxlength": 10,
"disabled": false,
"readonly": true,
"required": true
}).datepicker({
format: "mm/dd/yyyy",
orientation: "bottom auto",
autoclose: true
}).val("");
break;
case '3':
$("#frmStudent_search").attr({
"type": "text",
"placeholder": "XXXXXXXXXX",
"pattern": "[0-9]{10}$",
"title": "Student ID allows numeric values only - no other special characters",
"maxlength": 10,
"disabled": false,
"readonly": false,
"required": true
}).datepicker("destroy").val("");
break;
default:
$("#frmStudent_search").attr({
"type": "text",
"placeholder": "Select Search Criteria",
"pattern": "",
"title": "",
"maxlength": 0,
"disabled": true,
"readonly": true,
"required": false
}).datepicker("destroy").val("");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmfind_student" id="frmfind_student" autocomplete="off">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
<select class="form-control" name="frmStudent_filterby" id="frmStudent_filterby" required>
<option value="">--Search By--</option>
<option value="1">Name</option>
<option value="2">DOB</option>
<option value="3">Student ID</option>
</select>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
<input type="text" class="form-control" name="frmStudent_search" id="frmStudent_search" placeholder="Select Search Criteria" disabled>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" class="btn btn-block btn-primary">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="alert message-submit"></div>
</div>
</div>
</form>