I am having a multiple select like this:
<select multiple="multiple" class="myList">
<option value="1" selected="selected">Apple</option>
<option value="2" selected="selected">Mango</option>
<option value="3" selected="selected">Orange</option>
</select>
Now, apart from those options which must come selected in the select box, I wanted additional ajax functionality which would give values from a remote source.
Here is my code for select2
$(function(){
$(".myList").each(function(){
$(this).select2({
placeholder: "Search for fruits",
minimumInputLength: 2,
multiple: true,
id: function(e) {
return e.id+":"+e.name; },
ajax: {
url: "https://localhost:8443/fruit_search",
dataType: 'json',
data: function(term, page) {
return {
q: term
};
},
results: function(data, page) {
var frts=[];
$.each(data,function(idx,Frt){
frts[frts.length]=Frt;
});
return {
results: frts
};
}
},
initSelection: function(element, callback) {
var data = [];
},
formatResult: formatResult,
formatSelection: formatSelection
});
});
});
But I am getting the error:
Error: Option 'id' is not allowed for Select2 when attached to a
<select> element.
But when I use <input type="hidden"> then where should I keep the pre-selected options? How do I show them up when the select2 box appears?
If you only have values then you can use 'val' to get pre-selected values like this.
var PRESELECTED_FRUITS = [ '1','2','3'];
$('.myList').select2({}).select2('val', PRESELECTED_FRUITS);
You can use the "data" function to set the initial values:
var PRESELECTED_FRUITS = [
{ id: '1', text: 'Apple' },
{ id: '2', text: 'Mango' },
{ id: '3', text: 'Orange' }
];
$('.myList').select2('data', PRESELECTED_FRUITS)
Note: The "val" function is another way to set the initial values, but you only specify the ids with that function. In that case you would have to supply an "initSelection" function that builds the objects from the ids.
Also note that the "id" option is not the only option that is forcing you to use a hidden input. You cannot use the "ajax" option with a select element either.
As for the "id" option, I don't think you need it. Just put logic in the ajax "results" function so it builds an array of objects that have the proper id and text properties, or have the server return objects with those properties.
jsfiddle demo
To preset values use the 'val' property to preset the selected values.
$(this).select2({
val: ["1","2","3"]
}
But why not remove the 'id' function? If possible you could return the correct 'id' from the server without the need of the id function.
You can also load the values into the HTML:
<select class="selector" multiple="multiple" >
<option selected value="1">Apple</option>
<option selected value="2">Mango</option>
<option selected value="3">Orange</option>
</select>
And connect select2 to it:
$(".selector").select2({
width: 'inherit',
minimumInputLength: 2,
minimumResultsForSearch: 10,
placeholder: "Search for fruits",
ajax: {
delay: 1000,
url: "/bla_foo",
dataType: 'json',
type: "GET",
}
})
and select2 will prefill the form.
$('select').select2({
multiple: true,
data: [
{id: 1, text: 'Foo', selected: true},
{id: 2, text: 'Bar', selected: true}
]
})
$("#select2").select2('data', {id: '3', text: 'myText'});
Related
I am working on an SPA application where I have a list of data variables that are used as the <option> tags in the dropdown. I want to navigate to another page on the #change event of the dropdown therefore I want to use either the id or name of the select command as the name of the data property. Here is what I mean:
Here is what I have in the data function:
data(){
return {
participants: [
{ value: 0, linkText: '', linkTerm: 'Select' },
{ value: 1, linkText: '/meetings/participants/create', linkTerm: 'Add New' },
{ value: 2, linkText: '/meetings/participants', linkTerm: 'All Participants' },
],
positions: [
{ value: 0, linkText: '', linkTerm: 'Select' },
{ value: 1, linkText: '/meetings/positions/create', linkTerm: 'Add New' },
{ value: 2, linkText: '/meetings/positions', linkTerm: 'All Positions' },
],
}
}
Here is the select tag where I use the above data variables as the <option> tag:
<select name="participants" id="participants" class="select-field" #change="changeRoute($event)">
<option v-for="p in participants" :value="p.value">{{ p.linkTerm }}</option>
</select>
Now I want to have one function changeRoute($event) from which I will navigate to different pages, therefore I want to use the id or name value as the data property, here is the function:
methods:{
changeRoute($event){
var name = $event.target.name;
var value = document.getElementById($event.target.id).value;
}
}
Here in the above function I want to use the name as the data property as below:
I want to write this:
this.name[value].linkText;
And because name here is the name of the tag which is actually participants so the above line of code should mean something like this:
this.participants[value].linkText
And that should return the linkText of the participants object of the data function.
Any help is appreciated in advance.
Change the below line
this.name[value].linkText;
to
this[name][value].linkText;
I have a basic Easyui combobox where i need to add dynamic options based on some condition.
My Html :
<input id="org_type" name="org_type" class="easyui-combobox" data-options="required: true,valueField:'value',textField:'text',prompt:'Select Org Type'" style="width:100%;" >
Now i need to load some options based on some conditions.
for example :
if(level == 1){
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
}else{
<option value="vw">Volvo</option>
<option value="audi">Saab</option>
}
Though that's not the right approach i know.
I need actually something like this.
Finally i got my own solution.
Simply i added these JavaScript code when i need to add options dynamically.
let options = [];
if(level == "1"){
options = [
{
text: 'Volvo',
value: 'volvo'
},
{
text: 'Saab',
value: 'saab'
}
];
}else if(org_level == "2"){
options = [
{
text: 'Marcedes',
value: 'marcedes'
},
{
text: 'Scania',
value: 'scania'
},
{
text: 'BMW',
value: 'bmw'
}
];
}
$('#org_type').combobox({
data: options
})
And it work's fine for me.
Thanks.
When I try to show default selected value it doesn't show up i.e the option does not get selected in dropdown. The default value is coming from database and I'm setting that value in the model variable pageData.fields[content.id].keyFollowing is the sample JSON that I'm using to populate the dropdown:
$scope.dropdownFields = [{
groupName: 'PAGE',
isOptDisabled: false,
items: [{
name: 'PageName1',
type: 'page'
},
{
name: 'PageName2',
type: 'page'
},
{
name: 'PageName3',
type: 'page'
},
{
name: 'PageName4',
type: 'page'
}
]
},
{
groupName: 'COLOR',
isOptDisabled: false,
items: [{
name: 'COLOR1',
type: 'component'
},
{
name: 'COLOR2',
type: 'component'
},
{
name: 'COLOR3',
type: 'component'
}
]
},
{
groupName: 'OTHERS',
items: [{
name: 'Bold',
type: 'others',
isOptDisabled: false,
itemList: [{
name: 'Yes',
value: true
},
{
name: 'No',
value: false
}
]
},
{
name: 'Italic',
type: 'others',
isOptDisabled: false,
itemList: [{
name: 'Yes',
value: true
},
{
name: 'No',
value: false
}
]
}
]
}
];
<select id="{{content.id}}_filter" ng-model="pageData.fields[content.id].key" class="form-control" ng-change="onChangeFilter(pageData.fields[content.id].key, content.id)">
<option value="">[Select an option]</option>
<optgroup ng-repeat="header in dropdownFields" label="{{ header.groupName }}">
<option ng-repeat="item in header.items" value="{{ item.name }}" ng-disabled="isDisabled(header.groupName, item.name)">{{ item.name}}
</option>
</optgroup>
</select>
Is there any way to do this as I've researched a lot on this but the solutions were with ng-options and I cannot use ng-options for creating the dropdown due the disability functionality. The AngularJS version that I'm using is 1.2Any suggestion into the direction will be appreciated. Thanks.
EDIT: The code is successfully populating the dropdown and I'm able to get the value of selected option as well. But I'm not able to set an option by default into the dropdown. For eg. PageName3 is already selected in the dropdown.
EDIT2: So far now I'm able to show default value selected in this combobox on button click(here's the plnk) but I'm not able to set this value when I redirect from another page to this page.
So it goes like this, on this page(say PAGE1) I fill in these values there are multiple such dropdowns and textboxes in front of them for values, then I pass these values to the next page(say PAGE2); on PAGE2 I have a back button on the click of this button I return to PAGE1 with the same values passed before and I've to set all these values back as it were before. This is where I'm stuck! Not able to set selected values in dropdown while setting textboxes is done.
You can add default option into dropdown like so:
<input type="checkbox" ng-model="selected"></label><br/>
<select ng-model="item.name" ng-click="onChangeFilter(item.name)" class="form-control" >
<optgroup ng-repeat="header in dropdownFields" label="{{ header.groupName }}">
<option ng-selected="selected">Greetings!</option>
<option ng-repeat="item in header.items">{{item.name}}</option>
</optgroup>
</select>
plunker: http://plnkr.co/edit/vszVo3BHEA3T4yxGSUkA?p=preview
I have the following binding in js fiddle.
<div class="container body-content">
<div>Name : <span data-bind="text: Name"></span>
</div>The select control should be below
<select multiple data-bind="selectPicker: teamID, optionsText: 'text', optionsValue : 'id', selectPickerOptions: { optionsArray: teamItems, disabledOption: IsDisabled }"></select>
<div>Selected Value(s)
<div data-bind="text: teamID"></div>
</div>
</div>
I am thinking of doing this disabledOption: IsDisabled and then adding
this.teamItems = ko.observableArray([{
text: 'Chris',
id: 1,
IsDisabled: false
}, {
text: 'Peter',
id: 2,
IsDisabled: false
}, {
text: 'John',
id: 3,
IsDisabled: false
}]);
I would like to know how to disable an option in the select.
In the knockout docs, there's an example that shows how you can disable an item using an optionsAfterRender method.
About the method you can pass to it:
It has to be in your viewmodel, not in your items
It takes in the option HTML node, and the item it's bound to
So step one is to find a place to store which items are disabled. The easiest option would be to store it inside your teamItems' objects:
{
text: 'Chris',
id: 1,
disable: ko.observable(true)
}
Now, we need to add a method that takes in an item and creates a binding. We can take this straight from the example:
this.setOptionDisable = function(option, item) {
ko.applyBindingsToNode(option, {
disable: item.disable
}, item);
}
Finally, we need to tell knockout to call this method:
<select multiple data-bind="optionsAfterRender: setOptionDisable, ...
Note that after changing a disable property in one of your items, you'll have to call teamItems.valueHasMutated manually.
Here's an updated fiddle:
http://jsfiddle.net/nq56p9fz/
how to get id of selected name from dropdown.
whene select Apples then got id 1and select Oranges then 2.
this is simple kendo dropdown example.
<body>
<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1,
select: onSelect
});
function onSelect(e) {
console.log(e);
};
</script>
</body>
thanks.
In order to retrieve the selected Id you can use the dataItem object and access the id within it with change event:
var dataItem = e.sender.dataItem();
$('#id').text(dataItem.id);
This will get you access to any data within the object too:
$('#name').text(dataItem.name);
Working example
http://jsfiddle.net/ygBq8/1/
Html
<input id="dropdownlist" /><br/>
<span id="id" >Id</span><br/>
<span id="name" >Name</span><br/>
JavaScript
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1,
change: onChange
});
function onChange(e) {
var dataItem = e.sender.dataItem();
$('#id').text(dataItem.id);
$('#name').text(dataItem.name);
};
The Select event is a bit more difficult one to use, as that event fires before the item is selected.
If you use the Change event, you should be able to get the dataItem with
this.dataSource.get(this.value())
See sample http://jsbin.com/OcOzIxI/2/edit
Please use this.dataItem()
function onSelect(e) {
alert(this.dataItem().id);
alert(this.dataItem().Name);
};
To select ID of the selected item use:
$("#dropdownlist").val()
And to select TEXT of the selected item use:
$("#dropdownlist").data("kendoDropDownList").text()