I want to set my dropdown menu from my js. Basically, i want to be able to set the updated drop down value from the js.
my.html
<div class="dropDownList">
<select id="ddpFilter" >
<option value="1">Show 1</option>
<option value="2">Show 2</option>
<option value="3">Show 3</option>
</select>
</div>
my.js
events : {
'change #ddpFilter' : 'Filter'
},
Filter : function(e){
// Set Selected Value of the dropdown
}
});
You should start your function names with a lowercase letter (as per Mr Crockford) and use more descriptive function names.
In order to set the value of a select list, use option[value='x'] syntax. Assuming you'd like to set the second option:
events : {
'change #ddpFilter' : 'filterDdpSelect'
},
filterDdpSelect: function(e){
var selectValue = 2;
$("#ddpFilter option[value='" + selectValue + "']").attr("selected", "selected");
}
Related
Here is my (partial) code so far:
<select value={this.state.selectValue} onChange={this.handleChange}>
<option data-peopleid='' value=''>Select an option</option>
{film.map(({ url, title, characters }) => (
<option key={url} data-peopleid={characters.map(val => {let x=val.split("/"); return x[x.length-1]})} value={title}>{title}</option>
))}
</select>
The DOM is rendered like this
<select>
<option data-peopleid="" value="">Select a movie</option>
<option data-peopleid="1,2,3,4" value="A New Hope">A New Hope</option>
<option data-peopleid="2,3,6,7,10,11,20,21" value="Attack of the Clones">Attack of the Clones</option>
<option data-peopleid="2,3,10,11,16,20" value="The Phantom Menace">The Phantom Menace</option>
<option data-peopleid="1,2,3,4,5,6,7" value="Revenge of the Sith">Revenge of the Sith</option>
<option data-peopleid="1,2,3,4,5,10,13" value="Return of the Jedi">Return of the Jedi</option>
<option data-peopleid="1,2,3,4,5,10" value="The Empire Strikes Back">The Empire Strikes Back</option>
<option data-peopleid="1,3,5,13,14,27" value="The Force Awakens">The Force Awakens</option>
</select>
I am having some difficulties getting the data attribute "peopleid" onChange event of select box. The values in the data-peopleid attribute is dynamically added from data returned by an API.
Here is the handleChange function where I am trying to get attribute value.
handleChange(event) {
this.setState({selectValue: event.target.value});
console.log('U selected ', event.target.value); // This works
console.log('People ID ', event.target.getAttribute('data-peopleid')); // Print null
console.log('People ID ', event.target.dataset.peopleid); // Print undefined
}
I have tried different options as mentioned in this post, but none works.
Any help/pointers are very appreciated. Thanks
event.target returns the select, not an individually selected option thus you need to get the selected option to retrieve the data value of selected option.
function handleChange(event) {
const movieName = event.target.value;
const peopleid =
// .... 👇 .....
event.target[event.target.selectedIndex].getAttribute("data-peopleid");
console.log(`"${movieName}" âž¡ peopleid: ${peopleid}`);
}
In the code above, event.target[event.target.selectedIndex] will give you the selected option, from which you can get the data-peopleid attribute from.
And the result would look like below.
You can try out the demo here.
You can use selectedIndex to get the selected option node, then get the attribute of it.
handleChange = event => {
this.setState({selectValue: event.target.value});
const selectedIndex = event.target.selectedIndex;
console.log(
event.target.options[selectedIndex].getAttribute("data-peopleid")
);
};
I have dropdown using ng-model in angular2 and my view is not updating when I change the model
//intialize the variable
addplanhours:any[];
this.addplanhours=[{name: '--sel--',value:0}, {name: 'Head start',value:1}, {name: 'Nice going',value:2},{name: 'On Track',value:3},{name: 'Keep On trying',value:4},{name: 'Making process',value:5},{name: 'Wrapping up',value:6}];
//function of electrifyonchange
electrifyonChange(value) {
for(var i=0;i<=this.addplanhours.length;i++){
this.electrify= value;
console.log("new value",this.electrify);
}
<span>
<span class="addnotefont1">Electrifying</span>
<select class="addplanpicker"[(ngModel)]="electrify" (ngModelChange)="electrifyonChange($event)">
<option *ngFor="let a of addplanhours" [ngValue]="a.value">{{a.name}} </option>
</select>
</span>
[ngValue] can hold any kind of object or value, so you can use [compareWith] function to maintain the dropdown state because you are using object:
<select class="addplanpicker" [(ngModel)]="electrify" [compareWith]="isplanHourSelected">
<option *ngFor="let a of addplanhours" [ngValue]="a">{{a.name}} </option>
</select>
isplanHourSelected(o1, o2) {
return o1 && o2 && o1.value == o2.value
}
You will get electrify the selected object now, if you want to run a particular event when any value is selected in electrify then you can use OnChange strategy.
<select ng-model="sortOrder">
<option value="country">Country (A-Z)</option>
<option value="-country">Country (Z-A)</option>
</select>
controller:
$scope.sortOrder = ['-country', 'name'];
I have it set up something like this. It works otherwise but the select option by default is just empty. I would like the first option to be selected by default or even just some text there.. basically anything but an empty dropdown. How can I accomplish that?
You should use ng-options
<select ng-model="selectedItem" ng-options=" item.name for item in items"></select>
now to set the default option while creating list of items or If you are getting item list dynamically than you can assign the first item as a default item such
$scope.items = [{'name': 'Select Item'},
{'name' : 'Google Calendar'},
{'name' : 'Jira'},
{'name' : 'Zendesk'}];
//This will set the default item as selected.
$scope.selectedItem = $scope.items[0];
Let me know if its still not clear.
You can use "selected" attribute for <option> on init:
<select ng-model="selecteditem">
<option ng-repeat="item in items" value="{{item}}" {{item===selecteditem ? 'selected' : ''}}></option>
</select>
I'm using angularJS and bootstrap.
javascript:
$http.get('rest/impact').success(function(data) {
$scope.ho.impacts = data;
});
Html :
<select class="form-control" ng-model="ho.impact"
ng-options="imp.id as imp.name for imp in ho.impacts"></select>
And i can retrieve the value like this :
var dataObject = {
impact : $scope.ho.impact,
....
};
The issue is that when i go on the webpage, the select is empty.
Do you know how i can set a default value ?
like the first item of the list ..
Thanks,
You simply need to prepopulate the value referenced by ng-model:
$scope.ho.impact = $scope.ho.impacts[0].id;
You can add a select option with an empty value:
<select class="form-control" ng-model="ho.impact" ng-options="imp.id as imp.name for imp in ho.impacts">
<option value="">Please Select...</option>
</select>
See:
https://docs.angularjs.org/api/ng/directive/select
I have html code like this
<select id="userGroups" name="userGroups" ng-model="userGroups" required class="form-control">
<option value="{{grp.groupId}}" ng-repeat="grp in groups">{{grp.groupName}}</option>
</select>
and in my controller I want to set the default value but its not working
function CreateUserController($scope, grpList) {
$scope.groups = grpList.groupList; //it is loading correctly and dropdown is populating correctly
$scope.userGroups = "2";
}
I am trying to set the userGroups value to 2, but its always showing the first option in select
The best bet here is to use ng-options:
<select ng-model="userGroups"
ng-options="group.groupId as group.groupName for group in groups">
</select>
Fiddle