I render a <select> box in react from an array. My array looks like this:
options: [
{"id":1,"name":"Option1"},
{"id":2,"name":"Option2"},
{"id":3,"name":"Option3"}
];
I map the array and find all the options, then I render the options inside the map. However I'm able to select whatever option from the select, except the first one.
Here's my select:
<select
className="form-control"
name={this.props.name}
onChange={this.handleChange.bind(this)}>
{(Array.isArray(this.props.options) && this.props.options.length > 0) ? this.props.options.map(option => {
return (
<option key={option.id} value={option.id}>{option.name}</option>
)
}) : (<option>No Options Found</option>)}
</select>
How do I do it, to be able to select the first option as well? What am I doing wrong?
Your first option is selected by default. If you want - you can create an empty option and after that you can select first option.
render() {
const options = this.props.options.map(option =>
<option key={option.id} value={option.id}>{option.name}</option>
)
return (
<select
className="form-control"
name={this.props.name}
onChange={this.handleChange.bind(this)}
>
<option value="">Select option</option>
{options}
</select>
)
}
add a default line before your options
<option>select size</option>
quickview_product.map(itm => <option value={itm.label}>{itm.label}</option>)
Related
I use reactive forms within my app. In a certain form I want to display a required (Validators.required) select like this:
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option *ngIf="!dformControl.value"
value="undefined">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
The problem is whether I use value="undefined" or value="" the form control still is set to valid because it got a value. Do not present the value attribute results in value="Choose ...".
Am I using select with reactive forms in a false way or how would I be able to make the option "Choose ..." being not valid??
Assigning initial value of select control to null will do the trick. Try below,
model_property = null
....
this.fb.group({
....
'control_key' : [this.model_property, Validators.required]
...
})
Check this Plunker!!, Look into app/reactive/hero-form-reactive.component.ts file.
I updated the Plunker to include below and it seems to be working,
<select id="power" class="form-control"
formControlName="power" required >
// see the value is set to empty,
<option value="">Choose...</option>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
Hope this helps!!
What I do is add a blank option and when that is selected since there is no value it is not valid.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option></option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
I have a form with some <select> bound to an object comming from a webservice :
<select [(ngModel)]="configDatas.type" name="type" id="type">
<option value="0">Disabled</option>
<option value="1">Day</option>
<option value="2">Week</option>
</select>
<select [(ngModel)]="configDatas.days" name="days" id="days">
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
</select>
Everything work as expected on this side.
I need to add at the end of my form a sentence which is a summary of the users's choice.
Something like :
<span> You selected type {{configDatas.type}} with day {{configDatas.days}}</span>
but instead of the value i'm looking for the text of the option.
I would like to see something like :
You selected type Week with day Monday
Is this possible directly in the template without using any kind of conversion on the component side ?
This may be a version difference, but the accepted answer didn't work for me. But pretty close did. this is what did the trick for me.
(change)="updateType(type.options[type.options.selectedIndex].text)
Updated: You can use the change event to keep track of the newly selected option:
<select [(ngModel)]="configDatas.type" name="type" id="type" #type (change)="updateType(type.options[type.value].text)">
<option value="0">Disabled</option>
<option value="1">Day</option>
<option value="2">Week</option>
</select>
<select [(ngModel)]="configDatas.days" name="days" id="days" #days (change)="updateDay(days.options[days.value].text)">
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
</select>
<span> You selected type {{selectedType}} with day {{selectedDay}}</span>
export class App {
configDatas: any;
selectedType: string;
selectedDay: string;
constructor() {
this.configDatas = {
'type': '',
'days': ''
};
}
updateType(text: string) {
this.selectedType = text;
}
updateDay(text: string) {
this.selectedDay = text;
}
}
Updated Example http://plnkr.co/edit/ay7lgZh0SyebD6WzAerf
Another way to accomplish this is to use complex objects for your select list options.
You declare an interface for your options:
export interface Day {
id: number;
text: string;
}
Give it some options in the constructor:
this.days = [
{id: 0, text: 'Monday'},
{id: 0, text: 'Tuesday'},
{id: 0, text: 'Wednesday'}
];
Bind it to the option list. It's important to use ngValue here:
<select [(ngModel)]="configDatas.days" name="days" id="days">
<option *ngFor="let day of days" [ngValue]="day">{{day.text}}</option>
</select>
And finally output it:
<span> You selected type {{selectedType}} with day Id: {{configDatas.days.id}}, Text: {{configDatas.days.text}}</span>
Full example: http://plnkr.co/edit/kDanyC
Is this possible without keeping a separate array for each select ?
Not sure of the aversion to using two arrays to solve this but two functions could fix it.
<span> You selected type {{displayType(configDatas.type)}} with day {{displayDate(configDatas.days)}}</span>
Then just have some functions that return the text you want.
displayType(type) : string {
if (type == 0) {
return "disabled"
} else { //continue adding ifs
return ""
}
}
A objectively nicer way would to have two arrays that contain both the id and the text to display and then use a *ngFor to build the options up.
In simple way to get selected option text using (change)="selectDay($event)" event
<select [(ngModel)]="configDatas.days" name="days" id="days" (change)="selectDay($event)">
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
</select>
In TS File
selectCity(event:any) {
console.log(event.target[event.target.selectedIndex].text);
let day = event.target[event.target.selectedIndex].text;
}
how one can assign class="some_class" to option in select box?
i would like to have
<select class="my_class" name="example">
<option selected="selected" value="">Choose something ...</option>
<option value="1" class="some_class">Hello</option>
<option value="2" class="some_class">World</option>
</select>
But I don't have any idea how to do it.. my form looks like:
{{ Form::select('example', array('1' => 'Hello', '2' => 'World'), null, array('class' => 'my_class', 'placeholder' => 'Choose position ...')) }}
How can I add "some_class" attribute to OPTION menu ?
The Form builder doesn't support class attributes for option tags. You will either need to build the select manually, or use JavaScript / jQuery to add the class to the option tags.
You can use my_class similar to this:
.my_class select option{
font-size: 20pt;
color:red;
}
This will affect only <option> elements of your <select> element.
Also, you can use JS to do this.
I have this code on my view
{!! Form::select('room', $rooms, Input::old('room'), array('class' => 'form-control')) !!}
and this on my controller
$rooms = array('' => 'Select Room') + $rooms;
I wanted the first option to be selected and disabled which is the "Select Room". I tried to put it also in array and it didn't work.
If you want to disable only one option from select list then you can do this in html like this:
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
This will disable first option disabled.
For reff. http://www.w3schools.com/tags/att_option_disabled.asp
I want to add default text in the Drop Down:
Now I can get list data from database. But I can not set text default in Drop Down list data.
Code Example:
zend_form
$subject_level=new SubjectLevel();
$this->addElement('select','my_select',array(
'label'=>'My select',
'multioptions'=>$subject_level->getSubjectLevelList() // ok. data list from database
));
I want to show Drop Down output:
show
<option value="0" selected="selected">--- select please--- </option> // default text not from database
<option value="1">class 1</option>
<option value="2">class 2</option>
<option value="3">class 3</option>
This:
$this->getElement('select')->setValue(0);
will do fine.
Value of first element in given array is default text for select.
$options = array_merge(array("default text"), $subject_level->getSubjectLevelList());
$this->addElement('select','my_select',array(
'label'=>'My select',
'multioptions'=>$options
));