I'm new in this coding world. Can you help me please ?
I have this select element with a for loop:
{servicerate.map(dep=>
<select name="Country" className="form-select" aria-label="Default select example">
<option selected>Select the Country</option>
for (let servicerateid in servicerateid)
{
<option value="{servicerateID}" onChange={this.updateCountryChoice}> {dep.country} </option>
}
</select>
)}
enter image description here
and I'm getting this:
enter image description here
Anyone please ?
This should be obvious to you guys, but for me it's being complicated.
Thanks
I tried several ways to do the for loop but without success
Here is the code:
{servicerate.map(dep=>
<select value="{servicerateID}" onChange={this.updateCountryChoice} name="Country" className="form-select" aria-label="Default select example">
<option selected>Select the Country</option>
for (let servicerateid in servicerateid)
{
<option> {dep.country} </option>
}
</select>
)}
Related
optgroup label is repeating on droplist
this is the dropdown
<Input
id="period"
name="period"
type="select"
required
onChange={handleChange}>
<option disabled selected>
Please Select
</option>
{periodLists.map((item) => (
<optgroup label={item.period_category}>
<option
key={item.id}
value={item.period_name}>
{item.period_name}
</option>
</optgroup>
))}
</Input>
this the data
I need display the droplist like this
You are creating a separate optgroup for each item.
You need to have two nested loops, an outer loop for the groups and an inner loop for the items.
<Input
id="period"
name="period"
type="select"
required
onChange={handleChange}>
<option disabled selected>
Please Select
</option>
{
[1, 2, 3].map((category) => (
<optgroup label={category}>
{
periodLists.map.map((item) => (
<option
key={item.id}
value={item.period_name}>
{item.period_name}
</option>
))
}
</optgroup>
))
}
</Input>
I want to tell user to select any option from select other than first (index=0). I saw few examples and tried but not working for me:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option>- Select -</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div class="error" ng-show="Form.gender.$invalid">
Select gender
</div>
What to change here?
provide empty(default value) to option, so required field validation will fire on selection.
Html:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option value=''>- Select -</option> //Default value to empty
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
Is it possible to pass the who object using ng-repeat in options?
Example:
<select id="cREmp123" ng-model="vm.selEmployee">
<option value="" selected>Choose...</option>
<option ng-repeat="emp in vm.employeeList" value="vm.employeeList[$index]">{{emp.strEmpFirstName}}</option>
</select>
I tried this also
<select id="cREmp123" ng-model="vm.selEmployee">
<option value="" selected>Choose...</option>
<option ng-repeat="emp in vm.employeeList" value="{{emp}}">{{emp.strEmpFirstName}}</option>
</select>
I hope somebody will answer me.
I tried using ng-options and it doesn't solve my problem
Have you tried ng-options?
Sample code for your reference
<select id="cREmp123" ng-model="selEmployee"
ng-options="employee as employee.strEmpFirstName for employee in employeeList">
<option value="" disabled selected>- Please Choose -</option>
</select>
https://jsfiddle.net/uovcs2dr/
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>
I am trying to create a in AngularJS. Here's what I did so far:
<select ng-model="inverse">
<option value=true>Sort Up</option>
<option value=false selected="selected">Sort Down</option>
</select>
I was trying to set false as the initial value. However when I look at the HTML that's created I see this and the select box does not show "Sort Down" as the default:
<select ng-model="inverse" class="ng-pristine ng-valid">
<option value="? undefined:undefined ?"></option>
<option value="true">Sort Up</option>
<option value="false" selected="selected">Sort Down</option>
</select>
Can someone explain what I am doing wrong.
This works for me:
<select ng-model="inverse">
<option value="true">Sort Up</option>
<option value="false">Sort Down</option>
</select>
Controller:
$scope.inverse = "false";
However, using ng-options is suggested.
Set the value of inverse in the controller using:
$scope.inverse = true;
And remove the selected="selected" attribute from the option.
<select ng-init="inverse='false'" ng-model="inverse">
<option value=true>Sort Up</option>
<option value=false>Sort Down</option>
</select>