I'm working on an angular js 2 project and I need to create a dropdown (kinda like a link) wherein if you select an option it will trigger an onchange event and redirect the user. Currently I have this:
<select id = "dashboard" onchange="goToPage()" class="form-control">
<option value="" selected disabled>{{ 'Create' | translate }}</option>
<option value="Applicant" >{{ "dashboard.applicant" | translate}}</option>
<option value="Reports">{{ "dashboard.report" | translate}}</option>
</select>
In the select box I want the 'Create' option to always be selected even if the applicant selects Applicant or Reports. How can I do this behavior?
You can't cast onchange if user can't change selected value at all, but you can place inside your function this line document.getElementById("dashboard").selectedIndex = 0; which will select first option again:
function goToPage(){
document.getElementById("dashboard").selectedIndex = 0;
}
<select id = "dashboard" onchange="goToPage()" class="form-control">
<option value="" selected disabled>{{ 'Create' | translate }}</option>
<option value="Applicant" >{{ "dashboard.applicant" | translate}}</option>
<option value="Reports" >{{ "dashboard.report" | translate}}</option>
</select>
Related
<select class="custom-select rounded-0" id="exampleSelectRounded0" name="kode_poli">
#foreach ($polikliniks as $poliklinik)
<option value="{{$poliklinik->id}}">{{$poliklinik->kode_poli}} | {{$poliklinik->nama_poli}}</option>
#endforeach
</select>
My select option value will return a first id of poliklinik table
How to set select option 'selected' with another value in poliklinik table with my selected value when i insert before?
You will need to write an option with the selected id as the value and selected name in between the option tag
<select class="custom-select rounded-0" id="exampleSelectRounded0" name="kode_poli">
<option value="{{$selected->id}}">{{$selected->kode_poli}}</option>
#foreach ($polikliniks as $poliklinik)
<option value="{{$poliklinik->id}}">{{$poliklinik->kode_poli}}</option>
#endforeach
</select>
Note: substitute the selected with the model you used in saving it
Such the title, anyone can help me ? This is my code html
<select id="SelectTemplate">
<option hidden disabled value>View available templates</option>
<option *ngFor="let email of observableEmail | async">{{email.name}}</option>
</select>
you are close, please refer Angular doc for examples, you can try:
('yourFunc' indicates your typescript method name)
<select id="SelectTemplate" (change) = "yourFunc($event.target.value)">
<option hidden disabled value>View available templates</option>
<option *ngFor="let email of observableEmail | async" [value]="email">{{email.name}}</option>
</select>
I have to show the user name which is saved in db as selected in drop down.
<select name="field_user" id="field_user" class="txt_box sel_box" ng-model="field_user_select" >
<option value="" disabled selected>Select Field User</option>
<option ng-repeat="user in field_user_list" value="{{user._id}}" ng-selected="current_user._id">{{user.owner_name}}</option>
</select>
How to do that?
NgSelected waits for an expression. If it's true, it puts the selected attribute to the option. So you'll need to do something like:
<option ng-repeat="user in field_user_list" value="{{user._id}}" ng-selected="user._id === current_user._id">{{user.owner_name}}</option>
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
Iam trying to edit student details.
iam fetch values from database. blood group fetch from database to display select box. and also display other blood groups in same select box.
select class="form-control" name="studbldgrp" id="studbldgrp">
option value="{{$student->studbldgrp}}">{{$student->studbldgrp}}</option>
option value="O+ve">O+ve</option>
option value="O-ve">O-ve</option>
<option value="A+ve">A+ve</option>
<option value="A-ve">A-ve</option>
<option value="B+ve">B+ve</option>
<option value="B-ve">B-ve</option>
<option value="AB+ve">AB+ve</option>
<option value="AB-ve">AB-ve</option>
<option value="Other">Other</option>
</select>
my problem is if im fetch value is A+ ,and display in select box. but it also in option value field.
i no need to again this value(A+)A +ve in select option field.
how to disable this field???
Create an array of your groups. Than iterate over it and don't print value matches $student->studbldgrp.
Array in php:
$groups = array(
'O+ve',
'O-ve',
'A+ve',
'A-ve',
'B+ve',
'B-ve',
'AB+ve',
'AB-ve',
'Other'
);
Blade template:
<select class="form-control" name="studbldgrp" id="studbldgrp">
<option value="{{$student->studbldgrp}}">{{$student->studbldgrp}}</option>
#foreach ($groups as $group)
#if ($group != $struden->studbldgrp)
<option value="{{ $group }}">{{ $group }}</option>
#endif
#endforeach
</select>