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
Related
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>
I'm trying to get the value every time the user changes the select component. But the value always returns 'undefined'.
I've been through all Stackoverflow questions and other sites, but without success. I feel like I'm missing something here.
I'm using Ember 2.8.
My component template:
<div class="form-group">
<label for="{{selectId}}">{{selectTitle}}</label>
<select name="{{selectId}}" id="{{selectId}}" class="form-control" {{action "getSelectValue" on="change" value="target.value"}}>
<option value="0" selected>{{selectDefault}}</option>
{{#each model as |choice|}}
<option value={{choice.id}}>{{choice.name}}</option>
{{/each}}
</select>
</div>
My component logic:
import Ember from 'ember';
export default Ember.Component.extend({
tagName: '',
currentValue: null,
actions: {
getSelectValue(value) {
console.log(value); //always returns undefined
}
}
});
I'm calling it like this:
{{select-control model=model.tasks selectTitle="Task" selectDefault="Choose Task" selectId="taskSelect"}}
In the template I've also used the onchange="{{action...}}" syntax, but then the action wasn't called.
At this point I have no logic in my route or controller handling this.
Thanks for your help!
<select name="{{selectId}}" id="{{selectId}}" class="form-control" {{action "getSelectValue" on="change" value="target.value"}}>
change the above line to
<select name="{{selectId}}" id="{{selectId}}" class="form-control" onchange={{action "getSelectValue" value="target.value"}}>
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];
}
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());
}
I have a drop down list which filters category ASC and DESC. Google doesn't seem to understand that is duplicate content. How can I prevent Google from not following the drop down selections:
<select>
<select class="sort-by-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;" name="ssort">
<option onclick="window.location = "http://mysite.com/category1/sort/_post_name-pp-asc/"; return false;" selected="" value="http://mysite.com/category1/sort/_post_name-pp-asc/">Name ASC</option>
<option onclick="window.location = "http://mysite.com/category1/sort/_post_name-pp-desc/"; return false;" value="http://mysite.com/category1/sort/_post_name-pp-desc/">Name DESC</option>
</select>
Pretty sure rel="nofollow" only works within <a> tags.
Don't think it will work with a window.location