Knockout eg
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Roll No</th>
<th>Sex</th>
<th>Uniform type</th>
</tr>
</thead>
<tbody data-bind="foreach:studentData">
<tr>
<td><span data-bind="text:rollNo"></span></td>
<td><select class="form-control" data-bind="options:$parent.sexDropDown,optionsText:'name',optionValue:'id',value:sex,optionsCaption:'-Select-'"></select></td>
<td><select class="form-control" data-bind="options:$parent.uniformTypeDropDown,optionsText:'name',optionValue:'id',value:uniform,enable:sex() ? (sex().id == 2):false,optionsCaption:'-Select-'"></select></td>
</tr>
</tbody>
</table>
</div>
</div>
JavaScript
var studentViewModel = function () {
self = this;
self.studentData = ko.observableArray([
{ rollNo: 1, sex: ko.observable(null), uniform: null },
{ rollNo: 2, sex: ko.observable(null), uniform: null },
{ rollNo: 3, sex: ko.observable(null), uniform: null }
]);
self.sexDropDown = ko.observableArray([
{ name:"Male", id: 1 },
{ name:"Female", id: 2 }
]);
self.uniformTypeDropDown = ko.observableArray([
{ name:"Skirt", id: 1 },
{ name:"Trousers", id: 2 },
{ name:"Salwar", id: 3 }
]);
};
var viewModel = new studentViewModel();
ko.applyBindings(viewModel);