I have this drop-down list of ethnicity.
What I want is when I select clear ethnicity it should not appear in select box, and like box should be empty.
How can i do that?
<select
#ethnicity
[(ngModel)]="patient.Ethnicity"
[class.text-dimmed]="!patient.Ethnicity"
name="ethnicity"
id="ethnicity"
class="form-control input-underline input-lg ml-0">
<option [ngValue]="null" disabled> Select </option>
<option [ngValue]="null">Clear ethnicity</option>
<option value="Alaska-Native">Alaska Native</option>
<option value="American-Indian">American-Indian</option>
<option value="Asian">Asian</option>
<option value="African-Americans">Black or African American</option>
<option value="Hispanic">Hispanic or Latino</option>
<option value="Jewish-Ashkenazi">Jewish - Ashkenazi</option>
<option value="Jewish-Other">Jewish - Other</option>
<option value="Native-Hawaiians">Native Hawaiian or Other Pacific Islander </option>
<option value="Other">Other </option>
<option value="Unknown">Unknown </option>
<option value="White-Caucasian">White or Caucasian</option>
</select>
like when I select it, it appears like this
but what I want is,
here is my demo
clear ethnicity should show in dropdown but when i select it it should not show in select box like i shared screen shots
What should I do to solve this situation ?
Thank you.
You can handle change event of select tag like this.
onChange(value) {
if(value == 'Clear ethnicity'){
this.Ethnicity = '';
}
<select
#ethnicity
[(ngModel)]="Ethnicity"
[class.text-dimmed]="!Ethnicity"
name="ethnicity" (change)="onChange($event.target.value)"
id="ethnicity"
class="form-control input-underline input-lg ml-0">
Demo: https://stackblitz.com/edit/angular-clear-option-select
All you have to do is delete the value "Clear ethnicity" like I did below:
<option [ngValue]="null" [hidden]="clear.selected"></option>
Related
I have a select element like this:
<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
and I want user to select a option e.g. opt2, opt3... but opt1,
how to to use html 5 validation to valid the select?
I think the only way to add the validation here is to set the default option value to an empty string and add required attribute to select element. Now you can click on submit button to see the validation:
<form>
<label >Choose an option:</label>
<select name="select" required>
<option value="" disabled selected>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
<input type="submit">
</form>
The issue here is that when you set a value to the default option to something other than empty string the validation infers it as a valid value has been already selected, thus the validation is not triggered at that point.
You can do something like the following:
<select name="select">
<option value="opt1" selected disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
In the snippet above, the opt1 is selected by default. The user can only select opt2 or opt3, but once they do that then they cannot selecte opt1, hope this is the behaviour you're looking for.
Try Using:
<select name="select" required>
<option value="opt1" selected="selected" disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
I've got a Angular 2 form with a static select menu
<select formControlName="type" name="type">
<option value="reference">Referentie</option>
<option value="name">Aanhef</option>
<option value="street">Street</option>
<option value="postcode">Postcode</option>
</select>
How can I set the first as the selected value. What ever I do it turns up blank.
I've tried:
<option selected...
<option selected="selected"...
<option [selected]="selected"...
<option [selected]="reference"...
this.searchform.value.type = 'reference';
Hope someone can help.
this.searchform.controls['type'].setValue('reference')
<option value="name" selected>Aanhef</option>
works. You can refer
Plunkr
Here is a link of js fiddle
[https://jsfiddle.net/7Lcf533c/1/][1]
i make select dropdown read only but when i click on it it shows me the drop down option which should not show and it is changeable
Can you suggest a solution and update that in jsfiddle
You can do it like this:
$("#id_messageKindId option").prop('disabled',true);
use disabled attribute
<div class="col-sm-8"><select class="form-control" id="id_messageKindId" name="messageKindId" disabled="disabled" required="required" readonly="">
<option value="1">Appointment Reminder</option>
<option value="2">Eyeware or Contact Arrival</option>
<option value="3">Appt Delay / Move Up</option>
<option value="4">Appt Cancellation</option>
<option value="5">Recall</option>
<option value="7">After Appointment</option>
<option value="10" selected="selected">Pre Appointment</option>
<option value="11">Lab Results</option>
<option value="12">Collection Message</option>
<option value="13">Custom Message</option>
</select></div>
fiddle at https://jsfiddle.net/7Lcf533c/5/
I am making a bookings page for a movie theater. I would like the user to be able to choose days in which movies are showing and then based off the day, the sessions that are available.
For example, the first drop-down menu displays movies currently showing. if someone wants to see Pixels, then the second drop down menu displays the days Pixels is showing. Once the user selects a day, then the third drop down menu will provide the times that Pixels is showing on that particular day.
<label>Movie Name:
<select id="movie" name="movie">
<option selected="selected" value="">Please select a movie</option>
<option value="Pixels">Pixels</option>
<option value="Straight_Outta_Compton">Straight Outta Compton</option>
<option value="Last_Cab_To_Darwin">Last Cab To Darwin</option>
<option value="Nicki_and_The_Flash">Nicki and The Flash</option>
</option>
</select>
</label>
</br>
<label>Session Day:
<select id="day" name="day">
<option selected="selected" value="">Please select...</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
</label>
</br>
<label>Session Time:
<select id="time" name="time">
<option selected="selected" value="">Please select...</option>
<option value="1200">12:00</option>
<option value="1300">13:00</option>
<option value="1500">15:00</option>
<option value="1800">18:00</option>
<option value="2100">21:00</option>
</select>
</label>
Lets say Pixels shows on Mondays and Tuesdays and the only times it shows is at 13:00 and 18:00. How would i write the jQuery to provide this sort of functionality?
A quick exemple on how you can handle this :
JS
$("#movie").on("change", function(){
$("#day option, #time option").hide();
var days = $("option:selected", this).attr("data-days").split(",");
var times = $("option:selected", this).attr("data-times").split(",");
for(i=0; i<days.length; i++){
$("#day option[value="+days[i]+"]").show();
}
for(i=0; i<times.length; i++){
$("#time option[value="+times[i]+"]").show();
}
});
CSS
#day option, #time option{
display:none;
}
You have to store all informations about each movie in data-days and data-times attribute.
This way, once selected, you can retrieve all this informations, split them, and display corresponding <option>
Be carreful, you have a useless </option> tag at the end of your "#movie" <select></select>
Live Demo
Edit 1:
From your comment, the solution I can provide could look like this exemple
First, store all info in a data- attribute, like day1[time1,time2];day2[time1,time2] and so one.
After some split() & substring() on #movie .change() event, you can dynamically add specific options for the #day select tag (which will now look like <option value="Monday" data-times="13:00,18:00">Monday</option>).
Same as before, just make a function that will handle the data-times on #day .change() event to dynamically create the desired #time options
I have a select list in which one option is selected by default by ng-selected.
When selecting default option value and submitting by post method it does not appear in post variables.Its working fine when I change to some other options and back.
<select class="form-control" ng-model="newItem.if_unmard_rsn">
<option value="Under age" ng-selected="'Under Age'">Under Age
</option>
<option value="Health Issue">Health Issue
</option>
<option value="Economical Issue">Economical Issue
</option>
<option value="No reason">No Reason
</option>
</select>
try
<select class="form-control" ng-model="newItem.if_unmard_rsn" ng-init="newItem.if_unmard_rsn='Under Age'">
<option value="Under age" >Under Age
</option>
<option value="Health Issue">Health Issue
</option>
<option value="Economical Issue">Economical Issue
</option>
<option value="No reason">No Reason
</option>