I am new to bootstrap and i am trying to use the multiselect element in a table to act as a filter selector.
I can get the values chosen by using the onchange event, but how can I get the ID of the field the select element is in? I have tried different variations and combinations of $this, event and .id.
I really need to know what field this select is in or else I can't use it.
(The commented out code on the var fieldId line are some of the options I have tried)
TIA
// Multi select
$('.chosen-select').multiselect({
buttonWidth: '150px',
includeSelectAllOption: true,
enableFiltering: true,
onChange: function(option, checked, select) {
var fieldId = $(option.target)[0]; //=$(this).attr("id"); option.target.id ; $(option).id; $(select).id;
console.log('ID = ' + fieldId +' or '+ this.id + ' Changed option ' + $(option).val() + '.');
},
Add this line to your onChange event:
var selectID = $(option).parent().attr('id');
Here's a full example:
$('#multiSelect1').multiselect({
onChange: function(option, checked) {
var selectID = $(option).parent().attr('id');
}
});
<select id="multiSelect1" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
For events without params, for example: onSelectAll, you might use this way
var selectId = $(this.$select).attr('id');
Related
I'm fairly new to Angular and was wondering how I can update a dropdown after doing an insert and have the new value selected?
I tried the following:
<select class="form-control" ng-model="selectedCompany" ng-change="GetCompany()"
ng-options="company.key as company.value for company in CompanyList">
<option value="">Select a Company</option>
</select>
This populates a list of companies when the page 1st loads and the inserted data is returned to scope + it's id.
To add the new value without refreshing the page, I'm trying the following non-working (almost) code:
var key = $scope.company.id;
var value = $scope.company.name;
$scope.CompanyList.push({ key: value });
$scope.selectedCompany = $scope.company.id;
This seems to add a value to the dropdown, but it's showing up blank. It's also not selecting the blank value (which should be the new company name), any help would be appreciated.
It seems that when you create the new company object, you need to assign the value property which is the display name.
Here's a code snippet:
angular.module("myApp", [])
.controller("testCtrl", function() {
this.companyList = [{
key: 1,
value: "Company A"
}];
var ctrl = this;
this.addCompany = function() {
ctrl.companyList.push({key:2, value:"Company B"});
ctrl.selectedCompany = 2;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="testCtrl as ctrl">
<select class="form-control"
ng-model="ctrl.selectedCompany"
ng-options="company.key as company.value for company in ctrl.companyList">
<option value="" disabled>Select a Company</option>
</select>
<button ng-click="ctrl.addCompany()">
Add company B and select it
</button>
</div>
Ok, so what do we have here?
You're creating your options with the ngOptions directive like this: ng-options="company.key as company.value for company in CompanyList"
That mean that the array $scope.CompanyList must have objects with a key property that will be set to the option value attribute, and a value that will be the option display value (Or label, if you prefer to call it that way).
What you were doing wrong: You added an object with only one property named key and set its value with the value variable: $scope.CompanyList.push({ key: value });
How should you fix it: You need to append object(s) with a key and a value like so: $scope.CompanyList.push({ key: key, value: value });
The following line push an object, which has a property name "key" set to value:
$scope.CompanyList.push({ key: value });
The result will be:
{'key': $scope.company.name}
You may change it to:
$scope.CompanyList.push({key: key, value: value});
Which will result in:
{ 'key': $scope.company.id, 'value': $scope.company.name }
I am using angular-formly to generate radio groups. Everything works well except at a point where these radio buttons are being generated dynamically depending on some condition.
The Problem
Every instance of radio buttons gets the same dynamic ID generated by following formly template. As a result when I click on any radio button on the page, the first one gets selected as the ID attribute is always same.
function addRadioType(formlyConfigProvider) {
formlyConfigProvider.setType({
name: 'radio',
template: '<div class="radio-group vk">'
+'<div ng-repeat="(key, option) in to.options" class="radio">'
+'<input type="radio" id="{{id + \'_\'+ $index}}" tabindex="0" ng-value="option[to.valueProp || \'value\']" '
+' ng-model="model[options.key]">'
+'<label for="{{id + \'_\'+ $index}}">'
+' {{option[to.labelProp || \'name\']}}'
+' </label>'
+'</div>'
+'</div>'
,
wrapper: ['bootstrapLabel', 'bootstrapHasError'],
defaultOptions: {
noFormControl: false
},
apiCheck: check => ({
templateOptions: {
options: check.arrayOf(check.object),
labelProp: check.string.optional,
valueProp: check.string.optional
}
})
});
}
In html page i take one select box and put data in them by fetching records from databases like that..
<select id="category" ng-model="eventAdd.data.selCategory" ng-change="changeBg(eventAdd.data.selCategory)">
<option value="">-Select-</option>
<option ng-repeat="photo in photos"
value="{{photo.PhotoId}}">
{{photo.Category}}
</option>
<option value="other">Other</option>
</select>
In select box i add one option "Other" if user select that option i will show one input box there user can enter custom name and i will push it $scope.photos and it will display in selectbox but it can be not be selected.
Photo.allCategory().then(function(photos)
{
$timeout(function()
{
$scope.photos = photos;
},0);
});
$scope.changeBg = function(val)
{
if(val=="other")
{
$cordovaDialogs.prompt('Category name', 'Category', ['Ok','Cancel'], '')
.then(function(result)
{
console.log("call");
var input = result['input1'];
$scope.photos.push({photoId:9,Category:input});
$scope.eventAdd.data.selCategory = 8;
});
}
}
Using this line
$scope.eventAdd.data.selCategory = 3;
Third i item can be selected but when i am doing like
$scope.eventAdd.data.selCategory = $scope.photos.length;
It cannot be selected which last one added by in prompt.
Please check by codepan
http://codepen.io/pareshgami/pen/BooEap
Please help. Thanks for your time.
I have an object as below. I have to display this as a drop-down:
var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]
In my controller I have a variable that carries a value. This value decided which of the above three items in the array will be selected by default in the drop-down:
$scope.object.setDefault = 600;
When I create a drop-down form item as below:
<select ng-model="object.setDefault" ng-options="r.name for r in list">
I face two problems:
the list is generated as
<option value="0">abc</option>
<option value="1">def</option>
<option value="2">xyz</option>
instead of
<option value="4">abc</option>
<option value="600">def</option>
<option value="200">xyz</option>
No option gets selected by default even though i have ng-model="object.setDefault"
Problem 1:
The generated HTML you're getting is normal. Apparently it's a feature of Angular to be able to use any kind of object as value for a select. Angular does the mapping between the HTML option-value and the value in the ng-model.
Also see Umur's comment in this question: How do I set the value property in AngularJS' ng-options?
Problem 2:
Make sure you're using the following ng-options:
<select ng-model="object.item" ng-options="item.id as item.name for item in list" />
And put this in your controller to select a default value:
object.item = 4
When you use ng-options to populate a select list, it uses the entire object as the selected value, not just the single value you see in the select list. So in your case, you'd need to set
$scope.object.setDefault = {
id:600,
name:"def"
};
or
$scope.object.setDefault = $scope.selectItems[1];
I also recommend just outputting the value of $scope.object.setDefault in your template to see what I'm talking about getting selected.
<pre>{{object.setDefault}}</pre>
In View
<select ng-model="boxmodel"><option ng-repeat="lst in list" value="{{lst.id}}">{{lst.name}}</option></select>
JS:
In side controller
$scope.boxModel = 600;
You can do it with following code(track by),
<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>
This is an old question and you might have got the answer already.
My plnkr explains on my approach to accomplish selecting a default dropdown value. Basically, I have a service which would return the dropdown values [hard coded to test]. I was not able to select the value by default and almost spend a day and finally figured out that I should have set $scope.proofGroupId = "47"; instead of $scope.proofGroupId = 47; in the script.js file. It was my bad and I did not notice that I was setting an integer 47 instead of the string "47". I retained the plnkr as it is just in case if some one would like to see. Hopefully, this would help some one.
<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
This would get you desired result Dude :) Cheers
Some of the scenarios, object.item would not be loaded or will be undefined.
Use ng-init
<select ng-init="object.item=2" ng-model="object.item"
ng-options="item.id as item.name for item in list"
$scope.item = {
"id": "3",
"name": "ALL",
};
$scope.CategoryLst = [
{ id: '1', name: 'MD' },
{ id: '2', name: 'CRNA' },
{ id: '3', name: 'ALL' }];
<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>
we should use name value pair binding values into dropdown.see the
code for more details
function myCtrl($scope) {
$scope.statusTaskList = [
{ name: 'Open', value: '1' },
{ name: 'In Progress', value: '2' },
{ name: 'Complete', value: '3' },
{ name: 'Deleted', value: '4' },
];
$scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open
}
<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>
I could help you out with the html:
<option value="">abc</option>
instead of
<option value="4">abc</option>
to set abc as the default value.
I am new to extJS, and trying to implement the following functionality:
I have two select drop down menus, transformed using extJS. How can I make sure that if a value in one combo box is selected, the other value should be set back to some default value?
Thanks.
Edited: Code till now:
Ext.onReady(function(){
var converted = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'id_Select1',
width:600,
forceSelection:true,
emptyText:'Select'
});
var convertedCdr = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'id_select2',
width:600,
forceSelection:true,
emptyText:'Select'
});
});
I am using ColdFusion to query the database and populate the drop down menus:
<cfquery name="getData1" datasource="abc">
SELECT * FROM table1
</cfquery>
<cfquery name="getData2" datasource="abc">
SELECT * FROM table2
</cfquery>
<select name="select1" id="select1">
<cfoutput query="getData1">
<option value="#getData1.Id#">#getData1.name#</option>
</cfoutput>
</select>
<select name="select2" id="select1">
<cfoutput query="getData2">
<option value="#getData2.Id#">#getData2.name#</option>
</cfoutput>
</select>
EDITED - I haven't used CFM... you'll need to figure out how to load your CF using data stores to use this technique.
You will need to add a listener for the select event on the combo:
xtype: 'combo',
id : 'firstComboID',
listeners: {
select: function(combo, record, index ) {
var selVal = Ext.getCmp('firstComboID').getValue();
var secondCombo = Ext.getCmp('secondComboID');
secondCombo.store.reload({params: {yourParameterName: selVal}});
}
Basically you are doing the following here:
Get the value selected in the first combo
Get a reference to the second combo's data store
Reload the store of the second combo box using the selected value from the first combo