We Keep Coding

Vuejs - Change selected options in select from outside

How do I change selected options from the outside?
I have a multiple select and the user can click on the "All" button to select all the options.
Fiddle.
I've tried to use the jQuery function "prop", but it only works visually; it doesn't change the Vue data.
$('option', '#filter-accountexpl').prop('selected', true);

Stop using jQuery to do this.
You can select all of your options this way.
this.vaccountsexpl = Object.keys(this.accountsexpl)
You can select none of your options this way.
this.vaccountsexpl = []
You can select any list of your options this way.
this.vaccountsexpl = [129,132,133]
Here is your fiddle updated.
Vue is driven by data.

Preselecting options of multiple selectbox, using Materialize css FW doesn't work

I'm using materialize css framework. When I'm printing multiple selectbox (<select multiple>...), preselected options (<option selected...>) won't render.
Browser however understand that some options are preselected, so they are send again, when the form is submited. Also because of the rendering issue i'm unable to manipulate with preselected options or select new ones.
Normal Selectbox works just fine.

You can add onchange event to field and reset the values by accessing all the (li) children. If you see carefully. Multi select uses UL and a text field for value storing and keeps class "Active" for li. And append this code after .material select since check boxes are initialized after that
you can try following in
function change_materialize_multiple_Select(id_of_select)
{
var newValuesArr = [],
select = $(id_of_select),
ul = select.prev();
ul.children('li').toArray().forEach(function (li, i) {
if ($(li).hasClass('active')) {
newValuesArr.push(select.children('option').toArray()[i].value);
}
});
select.val(newValuesArr);
}

Reading multiple SELECT values with JavaScript/jQuery

I understand that SELECT multiple will let a viewer select multiple items in a dropdown list and then the form submission passes all the selected items. But how does this work in JavaScript when there is no form submission and you're just watching for a select change:
$('#delete_dropdown').change(function(e){
and then looking at $(e.target).val() for the selected values?
Thanks

You can look at this context inside your handler and val() will return the array of elements, with jquery you can do this:
$('#delete_dropdown').change(function(e){
var selectedArray = $(this).val(); //Array of selected values
});
Fiddle
If you are going with vanilla javascript you will need to loop through the options to check which all are selected and add them to suit yourself.

How to change/set value in kendo combobox

Can anyone let me know how can we change the value of kendo combobox dynamically.
Fiddle is here - http://jsfiddle.net/ashwyn/yL6w3/1/
In the above fiddle, when we click on click then the shown value should be changed to three (for eg.)
I found this link which list all datasource methods -
http://www.kendoui.com/documentation/framework/datasource/methods.aspx

If you know the value you want, you can also do:
$("#MyComboBox").data("kendoComboBox").value(id);

working demo http://jsfiddle.net/Bxsge/2/ or http://jsfiddle.net/Bxsge/1/ (behavior for demo when you will click on the link the select will change to three selected value.)
selects by jQuery object // selects by index combobox.select(1); // selects item
link: http://www.kendoui.com/documentation/ui-widgets/combobox/methods.aspx
Hope this helps, :)
code
$(function(){
var CB = $("select").kendoComboBox();
$("a").click(function(){
var $cbx = $("select").data("kendoComboBox")
$cbx.select(2);
});
});
​

Using data attributes to filter a select box (using third party JS filtering code)

I am using this relatively simple JS program:
http://www.barelyfitz.com/webdesign/articles/filterlist/
The program just filters a select box using a text box.
However, I want to jquery and HTML5 data attribute which is different how it was originally used. I give my text box filterer a data attribute:
<input id="filter_text" name="filter_text" data-filterable="myselect"
type="text" />
I use the following jquery to get the name of the select box that is to be filtered and then filter the select box:
$(function() {
$('input[data-filterable]').keyup(function() {
select_box_name = $($(this).data('filterable'))[0];
filter = new filterlist(select_box_name);
filter.set(this.value);
});
});
which NEARLY works. You can filter but if you press backspace to de-filter then nothing happens i.e. it doesn't 'unfilter'.
It must be something really small!!
Thank you :).

You need to initialize the filter outside the event handler:
$(function() {
$("input['data-filterable']").each(function() {
var filter = new filterlist($($(this).data('filterable'))[0]);
$(this).keyup(function() {
filter.set(this.value);
);
});
});

On every keyup you're reinitializing filter. So you can only filter on the select as it is right when you press a key. Move the initialization of the filter out of the keyup event and it's working.
Here's a fiddle.