Vuejs - Change selected options in select from outside - javascript

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.

Related

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);
}

Using JQLite How to select an item or items in a select box

I'm attempting to highlight 1 or more items in a select box in a unit test. I'm using Karma, Jasmine, and PhantomJS, AngularJS, JQLite, CoffeeScript.
My list has items ["banana", "apple", "orange"].
I tried setting the value directly:
sourceList = element.find('select').eq(1)
sourceList.val("[banana]").triggerHandler('change');
// Or
sourceList.val("banana").triggerHandler('change');
When I get sourceList.val() it's not set.
I tried triggering events to select it. Note I can't do a "click" event because I have another event fire on click.
sourceList.find('option').eq(0).triggerHandler("active");
sourceList.find('option').eq(0).triggerHandler("focus");
sourceList.find('option').eq(0).triggerHandler("drag");
sourceList.find('option').eq(0).triggerHandler("dragLeave");
I tried using the selectedIndex
sourceList.selectedIndex = 1
None of those seem to highlight or select the item. I'm out of ideas. Has anyone accomplished this?
Here is the method of the directive which I am trying to test:
// Clicks on the add button. Should take all items highlighted and move them over
$scope.add = function(){
var sourceList = $element.find('select').eq(1);
angular.forEach(sourceList.val(), function(val, index){
$scope.selected.push({
text: val
});
});
checkListDupes();
};
This code works when I do it manually in the browser but I can't seem to get my test to highlight some items in the select box before clicking the add button. So when this code executes sourceList.val() is equal to [].
A bit late to the party, but I'll leave it here for anyone else with the same problem.
I don't know how you've built the options for the select box but sourceList.val("banana").triggerHandler('change');
should work fine as long as the value of the option is banana. If you haven't specified a track by on the ng-options, the default values that angular creates will be 'string:'+<option label> so sourceList.val('string:banana').triggerHandler('change'); should do the trick.

multiselectfilter not working after refresh multiselectBox

I used jquery.multiselect.js and jquery.multiselect.filter.js.
I used like following.
$('#ddlmy').multiselect({ noneSelectedText: $(this).attr('noneselectedvalue') }).multiselectfilter();
Note : noneselectedvalue is my custom property
Now my dropdownlist changed on selection of other dropdown and i refresh multiselect like following.
var updatedOption = $("#ddlmy").find('option');
$('#ddlmy').multiselect("refresh", updatedOption);
Its working good but after changing value, filter not working in multiselect box.

how to select, not expanded dropdownlists with jquery

I m using kendo UI dropdownlist. But solutions for standard select element can help too.
I had tried
$('select:not(aria-expanded)')
$('select:not(aria-expanded=true)') // syntax error
$('select:not(expanded)')
$('select:not([aria-expanded=true])')
$('select:not([expanded=true])')
none of these work correct.
Thanks
You need to wrap the attribute inside square brackets [ ]:
$('select:not([aria-expanded=true])')
If you are asking about how to focus on the select dropdown list then use the methods that are apart of the api for the dropdown list.
<script>
$("#dropdownlist").kendoDropDownList();
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.focus();
</script>
update
Here is how you get the value of a Kendo dropdownlist using jquery:
<script>
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
var value = dropdownlist.value();
</script>

Select2 multiple-select - programmatically deselect/unselect item

I have a select2 list and a set of external buttons. I wanted to click the external buttons and unselect corresponding items in the select2 list. I know I can do item selection from external value using the command
$("#external_btn").click(function() {
$("#select2").val("CA").trigger("change");
});
So when I click on the "external_btn" button, the "ca" item will be selected on the select2.
But how I can do item unselection? Thanks.
There does not appear to be a built-in function to programmatically deselect/unselect an option from a multiple-select Select2 control. (See this discussion.)
But you can get the array of selected values, remove the value from the array, and then give the array back to the control.
Select2 v4:
The following code works for Select2 v4. It also works for Select2 v3 as long as the control is backed by a <select> element, rather than a hidden input element. (Note: When using Select2 v4, the control must be backed by a <select> element.)
var $select = $('#select');
var idToRemove = 'c4';
var values = $select.val();
if (values) {
var i = values.indexOf(idToRemove);
if (i >= 0) {
values.splice(i, 1);
$select.val(values).change();
}
}
JSFiddle for Select2 v4
JSFiddle for Select2 v3
Select2 v3:
The following code works for Select2 v3, regardless of whether you back the control with a <select> element or a hidden input element.
var $select = $('#select');
var idToRemove = 'c4';
var values = $select.select2('val'),
i = values.indexOf(idToRemove);
if (i >= 0) {
values.splice(i, 1);
$select.select2('val', values);
}
JSFiddle for Select2 v3, using <select> element
JSFiddle for Select2 v3, using hidden input element
As you've indicated in your question, you can modify the state of the underlying select element and then trigger a change. So then you can simply deselect an option in the same way you might with a regular select.
Assuming an option of value "val", the following code would deselect it:
$("#select option[value=val]").prop("selected", false) // deselect the option
.parent().trigger("change"); // trigger change on the select
http://jsfiddle.net/9fD2N/3/
I don't see anything to "deselect" an element. But, you can get the list of currently selected elements, remove your element and then set the value.
http://jsfiddle.net/wLNxA/
$("#e8_2").select2({
placeholder: "Select a state"
});
$('#removeBtn').click(function () {
// get the list of selected states
var selectedStates = $("#e8_2").select2("val"),
index = selectedStates.indexOf('NV'); // we're removing NV, try to find it in the selected states
if (index > -1) {
// if NV is found, remove it from the array
selectedStates.splice(index, 1);
// and set the value of the select to the rest of the selections
$("#e8_2").select2("val", selectedStates);
};
});
It's works.
$('{SELECTOR}').val('').trigger('change')
If you do not have any other event listener action on select option better :
$("#select2").val("CA").attr('checked', 'checked'); // to check
$("#select2").val("CA").removeAttr('checked'); // to un-check

Categories