I have an issue where I need to hide or remove options from a select2 dropdown when selected. These selections fill a list. I would rather not remove the option because if the user removes it from the freshly populated list then it should return to the dropdown with its place in the order restored. I've tried the following:
.select2-results .select2-disabled, .select2-results__option[aria-disabled=true] {
display: none;
}
$('#optionId').prop('disabled', true);
With the prop being set in the jQuery change block. I just can't get this piece.
I have figured it out. If the disable is wrapped like so:
$(#selectId).select2('destroy');
$(#optionId).prop('disabled', true);
$(#selectId).select2();
then the disabled setting will be honored by select2 and the the display none will make the item disappear. To make it reappear, just follow the same steps with the disabled property set to 'false'.
Related
I need the following functionally in material multi-select:
Once None is selected - all the checkboxes are unchecked and 'None' is obviously selected,
But once any value , other than 'None' is selected - the 'None' is unchecked and all the selected items are selected as usual.
Also None should be the preselect value incase nothing is selected...
So - the first issue i did in 2 ways :
1 - Added 'None' to my list and on the change function - deselecting all the rest
2 - Added another option markup with it's own logic
<mat-option #noneSelected (click)="toggleNone()" [value]="0">None</mat-option>
Problem is i don't know how to check and uncheck material items programmatically - i've tried with ref element - to get the dom element and check / uncheck it, but since it's material element - it's not that straight forward ....
example
You don't have to manipulate dom just use (selectionChange)event emitter to detect changes here's how it should be done
I'm using Select2 (version 4.0.2) to allow users to select multiple values and make tags of them. The problem is that when the span holding the tags is expanded after new tags are selected, the drop-down values list area is not repositioned accordingly.
This figure shows the Select2 area containing several previously selected values, prior to selecting additional values:
This figure shows what happens after I select one or more choices, which are hidden because the tags area is taller than it was, but the drop-down options list is stuck in the same position:
If I take focus from (blur) the tag area, the drop-down is re-displayed in the proper position to show all of the currently selected values/tags:
Question
How do I get the drop-down options area to dynamically reposition as new tag values are selected? Can I intercept a Select2 event and somehow force it to recalculate the vertical position? Or perhaps blur() then focus() the span each time a selection is chosen?
The solution I came up with was to force the drop-down element to be resized whenever a drop-down choice was selected or de-selected, which required catching the "change" event:
// Apply Select2 to the <select> element
var select2Elem = $("#" + controlID).select2(opts);
// Force drop-down list to resize upon select/unselect
select2Elem.on("change",
function(evt) {
select2Elem.resize();
}
);
I want to be able to select a listview item. On select/click I can use onclick event and add class to that li. But, is there any default way in which I can select an item in the listview. I mean, when I select, it should be highlighted and I should be able to get the selected value.
The jQM listview widget does not include any default functionality for a highlighted/selected item. Your approach of
handling the click,
adding a class, and
storing the currently
selected item in a global or data-attribute
is a good way to go.
I currently have a dropbox that lets users select from several numerical values. However, I'd also like to give them the option to enter a custom numerical value, and toggling between these options with a checkbox.
In Android, you could do this with a Checkbox's onClick method, and toggle these other fields (the dropbox and the text field) to enabled or disabled. I'm a bit new at Rails development, and I was just wondering if something like this would be possible?
Here dropbox mean dropdown ?
You can do his by calling a JS function on checkbox click
You can use CSS3 to toggle between 2 different form elements.
.my-checkbox + input[type=range] {
display: none;
}
.my-checkbox:checked + input[type=range] {
display: inline;
}
The above CSS code will hide the <input type="range"> element immediately after it, if only the checkbox with the class my-checkbox is checked.
I have this case where I set a current item from a list and I need to use a textarea to edit that element's value.
Because of some constraints I have to use a keyup event but I don't think that's a problem.
Check this fiddle: http://jsfiddle.net/terebentina/Euj2C/
click on first/second buttons - it works, it changes the text in the textarea to the value of each element.
change the text in the textarea to something
click on the first/second buttons again - the textarea is not updated anymore. If you look in console, you can see that it switches between the elements, it's just that the textarea is not updated anymore.
Any suggestions? this is driving me nuts!
I know there is a better way modifying your directive to do this but as a quick fix for now you can try binding your textarea to a ngModel value that is just a copy of the current text in the selected element:
<textarea keyup="" ng-model="keyupText"></textarea>
With this in as your current function:
$scope.current = function(idx) {
$scope.current_element = $scope.elements[idx];
$scope.keyupText = $scope.current_element.value;
console.log('current is', $scope.current_element.value);
}
See this fiddle for an example.