I have a select:
<select id="position">
<option *ngFor='#contactType of contactTypes' [attr.value]='contactType.contactTypeId'>
{{contactType.description}}
</option>
</select>
I would like to have a selected option on condition: 'contactType.contactTypeId == number' without using ngModel
I guess this is what you want:
<select id="position">
<option *ngFor='#contactType of contactTypes'
[attr.value]='contactType.contactTypeId'
[attr.selected]="contactType.contactTypeId == number ? true : null">
{{contactType.description}}
</option>
</select>
To get the selected attribute removed you need to return null (false results in selected="false").
Related
Current code for selecting birthday dates
<label>Birthday</label>
<select name="dob-year" id="dob-year" class="form-control">
<option value="" disabled>Year</option>
<option value="" disabled>----</option>
...
<option value="1971" {{date("Y", strtotime($friend->birthday)) == '1971' ? 'selected' : ''}}>1971</option>
<option value="1970" {{date("Y", strtotime($friend->birthday)) == '1970' ? 'selected' : ''}}>1970</option>
<option value="1969" {{date("Y", strtotime($friend->birthday)) == '1969' ? 'selected' : ''}}>1969</option>
...
</select>
<select name="dob-month" id="dob-month" class="form-control">
<option value="" disabled>Month</option>
<option value="" disabled>-----</option>
<option value="01" {{date("F", strtotime($friend->birthday)) == 'January' ? 'selected' : ''}}>01</option>
<option value="02" {{date("F", strtotime($friend->birthday)) == 'February' ? 'selected' : ''}}>02</option>
...
</select>
<select name="dob-day" id="dob-day" class="form-control">
<option value="" disabled>日</option>
<option value="" disabled>---</option>
<option value="01" {{date("d", strtotime($friend->birthday)) == '01' ? 'selected' : ''}}>01</option>
<option value="02" {{date("d", strtotime($friend->birthday)) == '02' ? 'selected' : ''}}>02</option>
...
</select>
What I want to do
is to add {{$friend->birthday == null ? 'selected' : ''}} like below in each Year/Month/Day tags
<select name="dob-year" id="dob-year" class="form-control">
<option value="" disabled>Year</option>
<option value="" {{$friend->birthday == null ? 'selected' : ''}} disabled>----</option>
...
</select>
The problem
This a weird one I cant seem to find the issue that is causing this.
Ive disabled all javascript and double checked what is being returned from controller too but cannot find the source of the issue.
The default selected values of Year/Month/Day is always 1970/01/01 even if I hard code selected on other options. For example <option value="" selected>Year</option> would have it only select 1970.
If I delete the whole 1970 option tag only then everything works fine. So for this to work I had to delete 1970 option tag, 01 January option tag and 01 day option tag. Which is no use...
Does anyone have an idea what could be causing this?
This is happening due to the format you are giving to strtotime() function, when giving any unsupported format to
echo date('Y/d/m',strtotime("20/03/03"));
echo date('Y:d:m',strtotime(null))
it will return you default value which is `1970/01/01`
you are passing either wrong format or null as parameter to strtotime()
Suggestion
You can do something like this, where you want to show the dropdown get dbirthday into a variable and check if it is null or not, and then update your $year, $day, $month value in that case if value is null it will not select any value and on right value it will select the option is correct.
#php
$friendBD = '';
$day = '';
$month = '';
$year = '';
#endphp
#foreach ($friends as $friend)
#php
$friendBD = $friend->birthday
#endphp
#if(!is_null($friendBD))
#php
$date = \Carbon\Carbon::create($friendBD);
$month = $date->format('M');
$day = $date->format('d');
$year = $date->format('Y');
#endphp
#endif
<label>Birthday</label>
<select name="dob-year" id="dob-year" class="form-control">
<option value="" disabled>Year</option>
<option value="" disabled>----</option>
<option value="1971" >1971</option>
<option value="1970" {{$year == '1970' ? 'selected' : ''}}>1970</option>
<option value="1969" {{$year == '1969' ? 'selected' : ''}}>1969</option>
<option value="2020" {{$year == '2020' ? 'selected' : ''}}>2020</option>
</select>
#endforeach
Your PHP might be invalid
http://sandbox.onlinephpfunctions.com/code/bb07478fd5cc5da9535750524631d0c78763fe11
If you have
$friend['birthday'] = "1980/02/01";
or
$friend = array("birthday"=>"1980/02/01");
then you need to access the birthday like this
echo strtotime($friend["birthday"]);
So your statements need to look like this
echo date("Y", strtotime($friend["birthday"]));
echo date("F", strtotime($friend["birthday"]));
echo date("d", strtotime($friend["birthday"]));
If you do NOT access the string correctly, your will get 1970, January, 01 for any date. In my case since I am in GMT+1, I get 1969, December, 31 for the "0" date resulting from an invalid date passed to strtotime
Alternatively use JavaScript:
const dob = "1971/02/01" // "<?= $friend["birthday"] ?>";
const [yyyy,mm,dd] = dob.split("/")
document.getElementById("dob-year").value=yyyy;
document.getElementById("dob-month").value=mm;
document.getElementById("dob-day").value=dd;
<label>Birthday</label>
<select name="dob-year" id="dob-year" class="form-control">
<option value="" disabled>Year</option>
<option value="" disabled>----</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
</select>
<select name="dob-month" id="dob-month" class="form-control">
<option value="" disabled>Month</option>
<option value="" disabled>-----</option>
<option value="01" 01</option>
<option value="02">02</option>
</select>
<select name="dob-day" id="dob-day" class="form-control">
<option value="" disabled>日</option>
<option value="" disabled>---</option>
<option value="01">01</option>
<option value="02">02</option>
</select>
I have a select HTML element in an Angular ngFor loop:
<select formControlName="type" required>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
In Internet Explorer, the first item in the list is selected when the template loads, but it's value isn't set in the form control, so causes a 'required' validation error until another value is selected in the list. I want to have a 'Please select' option that has a null value to prevent this happening.
This is for Angular 2+ used with or without TypeScript
Add an option like so:
<option [ngValue]="null">Please select</option>
So your control will look like:
<select formControlName="type" required>
<option [ngValue]="null">Please select</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
This works as Angular inspects the value attribute because of the square brackets. The value becomes a true null, unlike if we used value="" (this is just an empty string and doesn't match null).
In case you're not using ngForm, another approach to implementing the selected value is to do something like [value]='selectedType' (change)='selectedType = $event.target.value' in your select tag. For example:
In your component.ts:
public selectedType: string;
In your component.html
<select [value]='selectedType' (change)='selectedType = $event.target.value'>
<option value=''>-- Select your Type --</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
component.ts
public selectedValue = 'None';
component.html:
<div ">
<label>Highlight</label>
<select [(ngModel)]="selectedTrunk" (change)="onChangeTrunk($event)">
<option value='None'>None</option>
<option *ngFor="let trunklist of DRLNameTrunkList" [selected]="trunk" [value]="trunklist.SIPTRUNKNAME">{{trunklist.SIPTRUNKNAME}}</option>
</select>
</div>
This is my code pelase modify as per your requirements
I have a simple problem but i don't find a solution
I have this select:
<select name="projectObjectUpdate" [ngFormControl]="_projectAmountForm.controls['projectObject']"
class="form-control form-control-select2-field">
<option *ngFor="let object of _projectObjectList" [ngValue]="object" [attr.selected]="object.id === _projectAmountForm.controls['projectObject'].value.id ? true : null">
{{object.descriptions[_user.language]}}
</option>
</select>
In the HTML code, good option is selected
but nothing is selected on screen
anyone knows the problem ?
You also could just bind ngModel on your select element.
<select name="projectObjectUpdate" [ngModel]="_projectAmountForm.controls['projectObject'].value.id" [ngFormControl]="_projectAmountForm.controls['projectObject']"
class="form-control form-control-select2-field" >
<option *ngFor="let object of _projectObjectList" [ngValue]="object" >
{{object.descriptions[_user.language]}}
</option>
</select>
This will always select the option element with the same value as _projectAmountForm.controls['projectObject'].value.id
EDIT:
Sorry, yes ngValue was wrong! I meant ngModel. Corrected.
Try binding to the [selected] attribute, like that:
<option *ngFor="let object of _projectObjectList" [ngValue]="object" [selected]="object.id === _projectAmountForm.controls['projectObject'].value.id">
I'm passing a dictionary to a django template and trying to set a default value for a select box. This template is an 'edit product' template for a previous 'add product' template, thus the user selected one of the following options from a select box when he added a new product and what I am trying to do now is in the 'edit product' template so he can change it while the default will be as the one he selected at first.
Is there a way to do something like this:
<td><select name="gender_limit" deafault="{{django_context.gender}}">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Both">Both</option>
</select>
</td>
Rather than:
<td><select name="gender_limit" >
<option value="Male" selected >Male</option>
<option value="Female">Female</option>
<option value="Both">Both</option>
</select>
</td>
I have tried to look a solution for this but haven't found. Any help is appreciated. Thanks
I found a solution to my problem, here is an example (a different one from the question example):
<select name="units">
<option ng-selected="'{{ med.units }}' == 'mg' " value="mg">mg</option>
<option ng-selected="'{{ med.units }}' == 'gr' " value="gr">gr</option>
<option ng-selected="'{{ med.units }}' == 'mcg' " value="mcg">mcg</option>
<option ng-selected="'{{ med.units }}' == 'ng' " value="ng">ng</option>
</select>
Or even as so:
<select name="units" ng-model="'{{ med.units }}'">
<option value="mg">mg</option>
<option value="gr">gr</option>
<option value="mcg">mcg</option>
<option value="ng">ng</option>
</select>
med.units is django context passed from a view.
I am currently working on my first web application. Users need to fill a form, and one of the information is 'city', as a select type input. If the user chooses a city but one of the information is not valid, I would like the chosen city to stay there while the user fixes the invalid input.
For example, I did it for a date that the user needs to enter:
<input type=date name="endDate" value="<c:out value="${requete.endDate}"/>">
And it's working, but for a select type input I don't know how to do it..
<select name="city">
<option value="City" selected>City</option>
<option value="Ottawa">Ottawa</option>
<option value="Toronto">Toronto</option>
<option value="Montreal">Montreal</option>
</select>
The same sort of thing - let's say that the selected city is stored in request.city.
You would need to make sure that the selected option has the "selected" property in your JSP like so:
<select name="city">
<option value="City"
<c:if test="${empty request.city}">selected</c:if>>
City
</option>
<option value="Ottawa"
<c:if test="${request.city == 'Ottawa'}">selected</c:if>>
Ottawa
</option>
<option value="Toronto"
<c:if test="${request.city == 'Toronto'}">selected</c:if>>
Toronto
</option>
<option value="Montreal"
<c:if test="${request.city == 'Montreal'}">selected</c:if>>
Montreal
</option>
</select>
So, to sum up what this is doing - whatever is between a "c:if" element will only be output as HTML if the test evaluates to true. So all this test does is determine whether the selected city equals the value that option represents, and adds the "selected" property to that element if so.
Try with simple EL and selected attribute:
<select name="city">
<option value="City" selected>City</option>
<option value="Ottawa" ${'Ottawa' eq param.city ? 'selected' : ''}>Ottawa</option>
<option value="Toronto" ${'Toronto' eq param.city ? 'selected' : ''}>Toronto</option>
<option value="Montreal" ${'Montreal' eq param.city ? 'selected' : ''}>Montreal</option>
</select>