In my template i'm writing a form. But there is a problem. I want to show a dropdown select menü if checkbox is checked. Otherwise it won't be visible. Here is my codes:
<label for="webcam">Webcam*</label>
<input type="checkbox" name="webcam" value="checkbox">
<select>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
<option value="4">1</option>
</select>
Related
View Code Show the Drop Down In Client Side--
<select ng-model="employee.DeptId" class="form-control ng-pristine ng-invalid ng-invalid-required" required="">
<option disabled="disabled" value="">---Please Select---</option>
<option ng-repeat="Dep in ShowDep" value="{{Dep.Id}}">{{Dep.Name}}</option>
</select>
Angular Code In Edit Case----
$scope.EmployeeEdit = function (rowNumber) {
args = employeeArr[rowNumber];
$scope.employee.DeptId = args.DeptId;
}
Not clear about the structure of the data your binding.
So here I am showing your requirement with my own data. I think you could do the same in your cod also.
$scope.degrees = [
{"degree_code":"GB","degree_name":"Bachelor of Science"},
{"degree_code":"GR","degree_name":"Non Degree Undergraduate"}
];
$scope.selecteddegree = {degree_code:"GB"};
<!-- html -->
<select name="degree" class="form-control" ng-model="selecteddegree" ng-options="degree.degree_name for degree in degrees track by degree.degree_code" >
<option value=""> Select Degree </option>
</select>
Use ng-value instead of value in option tag.
<select ng-model="employee.DeptId" class="form-control ng-pristine ng-invalid ng-invalid-required" required="">
<option disabled="disabled" ng-value="">---Please Select---</option>
<option ng-repeat="Dep in ShowDep" ng-value="{{Dep.Id}}">{{Dep.Name}}</option>
</select>
I want to know how to make custom validation with Parsley like below case.
<select name="salary_type" class="form-control" id="id_salary_type">
<option value="" selected="">---------</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
<option value="6">option6</option>
</select>
<input type="number" name="salary" class="form-control" value="None" step="0.25" data-parsley-errors-container="#salary-errors" id="id_salary">
<div class="errors-box">
<div id="salary-errors"></div>
</div>
I want to show error messages if input salary is empty and when selected option is option1 or option2.
However, I don't want to show error message when user selected --- or option3 or option4 or option5 or option6 and submit.
Help me, please.
I have a dropdown:-
<select class="select" id="select" multiple="multiple" ng-model="a.NA">
<option value="1">1</option>
<optgroup label="group">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</optgroup>
</select>
And a checkbox:-
<input type="checkbox" id="a.clM.checkbox2" value="option1" ng-disabled="a.NA">
<label for="a.clM.checkbox2">NA</label>
When I check 'NA' checkbox the dropdown is disabled,so no one can check the inner checkboxes of the dropdown.
But if I check anyone of the inner checkboxes first then check NA checkbox the dropdown got disabled but the checked inner checkboxes remains checked.
What I want is if I check the NA checkbox the inner checkboxes got unchecked(if checked).
In a parent select option have Option-1,Option-2,Option-3 and also empty also be there. When ever selecting the any option i want to display the below child select fields like if select Option 2 i want display 2 selection fields below like that same, if select empty i don't want to show child selection tags.
This is the code but i don't want to show static way I need to display dynamically
function Controller ($scope) {
$scope.myDropDown = '';
}
<div ng-app ng-controller="Controller">
<select ng-model="myDropDown">
<option value="q"></option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select ng-show="myDropDown=='one'" >
<option value="1"></option>
<option value="111">1</option>
<option value="1111">1111</option>
<option value="111">1111111</option>
</select>
<select ng-show="myDropDown=='two'" >
<option value="2"></option>
<option value="222">2</option>
<option value="2222">222</option>
<option value="222">22222</option>
</select>
<select ng-show="myDropDown=='two'" >
<option value="22"></option>
<option value="222222">22</option>
<option value="22222222">222222</option>
<option value="222222">2222222222</option>
</select>
<select ng-show="myDropDown=='three'" >
<option value="3"></option>
<option value="333">3</option>
<option value="3333">333</option>
<option value="333">33333</option>
</select>
<select ng-show="myDropDown=='three'" >
<option value="33"></option>
<option value="333333">33</option>
<option value="33333333">333333</option>
<option value="333333">3333333333</option>
</select>
<select ng-show="myDropDown=='three'" >
<option value="333"></option>
<option value="333333333">333</option>
<option value="333333333333">333333333</option>
<option value="333333333">333333333333333</option>
</select>
</div>
if I well understand your question, you want to select item from the select and then show 1,2 or 3 items in the ionic list, if that is what you want, here is an idea to do that:
<div class="well" ng-show="Lang1 == '1'">
<div class="form-group">
<select class="form-control" id="sel2" ng-model="Lang2" ng-change="changeMe()">
<option ng-option value="1">Language 1</option>
<option ng-option value="2">Language 2</option>
<option ng-option value="3">Language 3</option>
</select>
</div>
<ion-list>
<ion-checkbox ng-if="Lang2>=1">Read</ion-checkbox>
<ion-checkbox ng-if="Lang2>=2">Write</ion-checkbox>
<ion-checkbox ng-if="Lang2>=3">Speak</ion-checkbox>
</ion-list>
</div>
here is an example :
Edit
here is what you wantPS: this is just an example to inspire you, the real solution depends on your needs
Edit
what about this example
I have a problem in selecting the default value of the select option when I try to load the page,this is my code:
<select ng-model="sortKey" class="ng-valid ng-pristine">
<option value="LastName" selected="selected">Nom</option>
<option value="FirstName">Prenom</option>
<option value="Class">Classe</option>
</select>
I have used the selected="selected" attribute but always I have this problem
Thanks for help
this is a demo:
<select ng-model="sortKey" style="border-radius: 20px;width: 135px;height: 32px;margin-left: 0px;margin-right: 22px;" class="ng-valid ng-dirty ng-pristine">
<option selected value="LastName" >Nom</option>
<option value="FirstName">Prenom</option>
<option value="Class">Classe</option>
</select>