Issue
It is a completed project, I am asked to solve an issue.
There are 3 select boxes, and all have different names. First select box's name is nameSelectBox162572640796915, second one is nameSelectBox16257264317217, third one nameSelectBox162572643286379
There are 3 value options for select boxes, they are "1", "2", or "3", If i choose 1 or 2 or 3, whatever i choose wont be selectable for others,
On developer tools, i am able to do it.
For example: whatever i choose in first SelectBox, i write this code for the second, so that value wont be selectable for that select box
var source = document.getElementsByName("nameSelectBox162572640796915")[0];
source.value
document.getElementsByName("nameSelectBox16257264317217")[0].options[source.value].setAttribute("disabled","disabled")
the page where i look at it is http://localhost:3000/#/form
But i cant find that page, and i dont know where to write that code which worked for me... How can I do it?
Solution
Here's one way to do it. Set the options to be created through ng-repeat, then use ng-disabled to test for which numbers have been selected already
angular.module('myApp', [
// myApp dependencies (controllers, etc.) injected here...
'myApp.controllers'
]);
angular.module('myApp.controllers', []).
controller('MyCtrl', ['$scope', function($scope) {
$scope.select1 = '';
$scope.select2 = '';
$scope.select3 = '';
$scope.numbers = [1, 2, 3, 4, 5];
}])<html ng-app="myApp" ng-controller="MyCtrl">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<select ng-model="select1">
<option ng-repeat='num in numbers' ng-disabled="(select2 == num || select3 == num)">{{num}}</option>
</select>
<select ng-model="select2">
<option ng-repeat='num in numbers' ng-disabled="(select1 == num || select3 == num)">{{num}}</option>
</select>
<select ng-model="select3">
<option ng-repeat='num in numbers' ng-disabled="(select2 == num || select1 == num)">{{num}}</option>
</select>
</html>Answered By - Kinglish
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.