My goal is to reset selected values in selectize input. I called selectize function in seperate js file (working with Ruby on Rails), so there is no option to create some global selectize input variable (at least I want to avoid it).
In select2 I would solve similar issue like that:
$(".select2").select2("val", "")
but when I call selectize() second time on the input all previous options and collection loaded via ajax just dissappear.
Thanks for help
Selectize uses .selectized as its identifying class.
Unfortunately, selectize is not accessible via $('.selectized').selectize - you need to go directly to the <select>/<input> element - $('.selectized')[0].selectize as shown in the docs.
I don't believe you can access all selectize items at once, you need to iterate through them. I recommend using the map function, such as something like:
$.map($('.selectized'), function(item, index) {
item.selectize.setValue('');
});
Related
I have a Kendo Grid which has an option to add a new record using the Popup Editor.
One field from the popup editor is a DropDownList. I have the first record from the dropdown list pre-selected when I open the Popup Editor. Since I pre-selected it, I would like it to be automatically created (bound) within the grid (when pressing "Update") without having to manually select it again.
I have the example script here
Working script: https://dojo.telerik.com/OFinidew/28
Here's a few things that are useful to know:
1. Defining schemas for your dataSources
A schema is a way to define what structure to expect from your data. When a schema is defined, your data will be "bound". As much as possible you'll want to bind your data, because as a last resort you'll end up having to use templates. Normally, Kendo UI will try to figure things out and get things bound automatically, but in special cases you'll have to give it a schema. This is one of those cases.
From the code sample, it seems like the approach of the workaround was to try change the "edit" event of the kendoGrid to immediately select the "Processing" status - Instead, you can define the "Processing" status (value "2") as the defaultValue of the "status" field in your model. But then, you'll need to make sure your custom editor template CAN be bound to, which leads us to..
2. Using the HTML property: data-bind="value:(nameOfYourField)"
When you're making your own editor templates for the kendo popup, it has no way of knowing what part of your HTML to bind to. See the statusDropdownEditorTemplate in the link provided as an example of how this is done.
3. What valuePrimitive means
Normally, a kendoDropDownList will return an object containing both the Text and Value of the selected choice. But this is not what we want in this case, because status is defined as "0", "1", "2" - so we just wanted the value. When you set valuePrimitive to true, you're instructing the kendoDropDownList to only return the value itself, not an object containing everything.
I have this angular component on the page which has all the options binded.
Using jQuery, I was able to retrieve the correct selected value with the following:
$('#mat-select').val(); // returns me the id of the selected option
However, when I try to update the value with jQuery, the value is updated but not reflected on the component on the screen.
eg.
$('#mat-select').val(); // eg. returns 'mat-select-option-0'
$('#mat-select').val('mat-select-option-5').trigger('input').trigger('change');
$('#mat-select').val(); // returns me 'mat-select-option-5'
Yet, the selected value on the component still appears to be mat-select-option-0. I am guessing that I am just setting the dom's value attribute and not updating the angular component but couldn't figure out how.
Can someone please advise?
It is not recomended to use jQuery together with Angular, because they bouth are manipulating with dom in their own way try using https://ng-bootstrap.github.io/#/getting-started
That will allow you to avoid many future problems.
I'm currently using the most up-to-date version of Select2. The select2 box is used to display a list of skills. I am trying to set the default values (for when it's opened) to contain the current skills. I have the information in proper format, I just cannot understand how to set it. The closest I've gotten is using:
//b is array containing list of user selected options
//#e1 is select2 id
for($i=0;$i<b.length;$i++) $('#e1').val(b[$i]).trigger("change");
However, this only displays the LAST option. Which I think is because I'm not allowed to set it in a loop. However I'm unsure how else to do it??
Any current solutions are invalid as of Select v2.4.0 as initSelection and .select2("val", data etc.) was removed.
Any help is appreciated.
My solution was actually very simple and avoided for loops all together.
$('#e1').select2({
//info
}).val(b).trigger("change");
val() in jQuery also accepts arrays.
I am trying to create a multiple select input element in Ember, where the content is coming from a hash, containing the label, value and group for the different options. This works fine, however I am not able to access the value binding.
Here is the JSBin; after submitting the form, it logs the selectedField variable to the console which is always 'undefined'.
I would like to implement the binding so that the initial contents of selectedField are preselected.
Update: I now see that the value method is unsupported for multiple selections, but then how do I pre-select and retrieve the selections?
Solved: I need to bind the Select via 'selection' (see JSBin).
I have a drop down select menu that is generated dynamically. Its generated using the html select syntax which is then simply inserted using the .after method. And then I use ajax call to get elements of the selector and fill it like this.
$($.parseJSON(msg)).map(function () {
return $('<option>').val(this.id).text(this.name);
}).appendTo('#item');
Now After this code populates the 'item' drop down menu I have to set it to the some element, say the fifth. So I tried to do it like this.
$('#item').val('5');
I have even tried to specifically identify the item. Since its in html table, like this.
$("#itemTable > tfoot > tr.items").find("td:eq(0) [name='item']").val('5');
The above code works fine in other situations when I have a drop down manually created. So I figured both the above attempts are not actually identifying the 'item' drop down component. So is there any other way I can try this?
jquery documentations for map() says: "If you wish to process a plain array or object, use the jQuery.map() instead."
Your dropdown will not get populated (check console for errors) and so setting any value to #item will not work.
Try this:
var options = $.map($.parseJSON(msg), function (n, i) {
return $('<option>').val(n.id).text(n.name);
});
$("#item").append(options);
With this code, drowdown will get populated and then $("#item").val("5") will work.
JSFiddle: http://jsfiddle.net/6Us9N/