I'm using Bootswatch Sandstone https://bootswatch.com/sandstone/
And I have a form with source code:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple="" class="form-control" id="exampleSelect2">
<option><p class="text-left">Subject 1<p><p class="text-right">500 views</p></option>
<option><p class="text-left">Subject 2<p><p class="text-right">400 views</p></option>
</select>
</div>
How to left and right align text values within the options?
To the best of my knowledge, it is not possible to have different formatting within an option tag. One option you could use is have information appear as a tooltip using the title attribute like so:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple="" class ="form-control" id="exampleSelect2">
<option title="500 views">Subject 1</option>
<option title="400 views">Subject 2</option>
</select>
</div>
Related
I would like to have multiple selections without multiple.vue librabry. I want to write it by my own. I have data like this in js:
data:
roles : [here data]
form.roles: []
And my html with Vue:
<select class="form-control required-select2" v-model="form.roles" id="roles" required>
<option v-for="role in roles" v-bind:value="role.id" v-bind:selected="form.roles.indexOf(role.id) > -1">
{{ role.display_name }}
</option>
</select>
How can I have in form.roles more than one role.id? I have to write maybe a method for this?
Do you want to do something like https://codepen.io/ittus/pen/vjdLvb
You need to add multiselect options to your select
<template>
<select class="form-control required-select2" v-model="form.roles" id="roles" multiple required>
<option v-for="role in roles" v-bind:value="role.id" v-bind:selected="form.roles.indexOf(role.id) > -1">
{{ role.display_name }}
</option>
</select>
<div>Selected: {{ form.roles }}</div>
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 the following select menu:
<div class="medium-3 columns">
<label>First Menu
<select name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
I would assing a model to the select menu so i edited the code in the following way (i see it here):
<div class="medium-3 columns">
<label>First menu
<select [ngModel]="myForm.firstMenu" (ngModelChange)="onSelected($event)" name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
On ngModelChange it triggers the following method in the component:
onSelectedFirstMenu(e: any): void {
myForm.firstMenu = e;
}
Since i have to add several menu, i would make code reuse so i do not want to create multiple methods like onSelectedSecondMenu, onSelectedThirdMenu and so on for every html menu.
So i just want to use a different ngModel for every menu (myForm.secondMenu, myForm.thirdMenu and so on...) to get the selected option.
Is it possible in Angular2?
I solved and there are 2 ways to get the same behaviour:
First way (preferred):
<div class="medium-3 columns">
<label>First Menu
<select [(ngModel)]="myForm.firstMenu" name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
Second way:
<div class="medium-3 columns">
<label>First Menu
<select [ngModel]="myForm.firstMenu" (ngModelChange)="myForm.firstMenu = $event" name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
More info here
If i understand your question correctly, every single menu has a different purpose, therefore, trying to somehow combine the invoked method for all of those menus is incorrect.
Having a method for each of those <select>s is the right approach, each one of them should have its' own logic
Please let me know if i misunderstood
Use [(MyForm.firstMenu)] to bind the select to your firstMenu property
Something like this should do depending on your concrete requirements:
<select [(ngModel)]="myForm.firstMenu"
constructor() {
this.myForm.firstMenu = items[0];
}
I trying to make a select sortable but not having much luck
http://jsfiddle.net/ajcppmod/DGTG7/6/
<div class="sortable">
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
$('.sortable').sortable({
connectWith: ".sortable",
});
Is the select swallowing the mouse event. I'm pretty new to JS!
Thanks
AJ
Im a bit of a jQuery novice.
I have 5 options in a drop down menu.
I want to add a class in a div depending on which option is selected.
This class will then change the layout of the content using CSS.
Here is an example if it helps!
Thanks
<form>
<select>
<option id="1">layout 1</option>
<option id="2">layout 2</option>
<option id="3" selected>layout 3</option>
<option id="4">layout 4</option>
<option id="5">layout 5</option>
</select>
<div class="3">styled content</div>
</form>
You can use the ".attr()" to set the class attribute of the div onchange.
You're best to change the option id to value first. then:
$("select").change(function() {
$("div").attr("class", $(this).val());
});
(EDIT) Change it to:
$("select#np_blog_layout").change(function() {
$("div#changebox").attr("class", $(this).val());
});
What 'rudeovski ze bear' said, but if you still want to set it to the div's class to the selected elements id, here it is.
$('select').change(function() {
$('div').attr('class', $(this).attr('id'));
});
First off, you don't have to use id to your options. Put the values in value attribute. Put ID to your div and select so you can select them using jQuery.
<form>
<select Id="selectElement">
<option value="1">layout 1</option>
<option value="2">layout 2</option>
<option value="3" selected>layout 3</option>
<option value="4">layout 4</option>
<option value="5">layout 5</option>
</select>
<div id="styledContent" class="3">styled content</div>
</form>
On JS
//Attach event handler to select element's onchange event
$('#SelectElement').bind("change",changeStyle);
//The event handler
function changeStyle()
{
//Set class to selected value
$('#styledContent').class($('#SelectElement').val());
}