I need help with the following scenario:
I use a single-select dropdowns in a table. Each row has its own dropdown.
Now there are 2 options for changing the selection:
Click on deselect ('x') icon (works ok - via ng-change).
Open the dropdown, choose another value from list. Override the previous value (although ng-change fires, I have no way to know if it's a new value or a overriding value).
I wish to disable the second behavior. Is it possible to 'tell' chosen that once a value was selected, the only way to re-select a new value is to click on 'x'?
e.g: once a value was selected, disable the dropdown, hide the 'arrow' icon, but keep the 'x' deselect icon active?
<select chosen
allow-single-deselect="true"
placeholder-text-single="'Select'
ng-model="row.userSelection"
ng-options="field as field.name for field in vm.fields">
<option value=""></option>
</select>
Thanks.
Add an ng-disabled="$ctrl.model" will disable the select until the "x" clears the $ctrl.model. Once cleared the select will be Reenabled and a new selection can be made.
The only thing I can think of after taking a quick look, is to convert from ng-options to and use ng-disabled on the actual option element. The documentation says that you can hide disabled options, so if for example you were to select OPTION1 and OPTION[2-4] were disabled, they would be removed from the list.
I found a plunker with version 1.0 but it doesn't work. Making options distabled still shows them in the list, although it makes them undefined when you select them. Maybe a newer version is updated to actually remove them.
Related
When there are multiple checkbox options inside dropdown I don't want them to apply on each selection.
I would like to do like this : After checking few options, user has to click the apply button inside the dropdown then the options will get selected. If user doesn't click apply his selection will get reset.
Also I would like to show the selected option like this, instead of showing all the options inside the dropdown. If there is more than one option selected user will se (+1 other) or anything other text
The versions I'm using:
Angular Version: 7.3.7,
Ng-select Version:2.20
Can anyone help?
Example Fiddle
Description:
I have applied chosen plugin for a multiselect dropdown
The first option is "Any"
Those who are accustomed with chosen dropdown,they know that when an option is selected(from chosen multiselect) and presented in the dropdown textarea-like field, you will see it disabled from the list menu automatically.
When the first option "Any" is be selected, then all the other options from the list menu is also disabled.
When the "Any" option is removed from the dropdown textarea-like field(deleting by clicking on the cross with the selected option),then again all the options are enabled.
Requirement:
If we select any option from the dropdown, then its presented in the textarea-like filed, denoting that its being selected.
First select any option except "Any".
It will be displayed on the textarea-like field.
Now Select "Any".
Any will be displayed in the textarea-like field, and the previously selected option(s) is also being displayed in the textarea-like field.
I need the previously options selected to be removed from the textarea-field
How can I achieve this functionality?
You can define what happens in your if statement that checks to see if the Any option is selected
if (params.selected && params.selected == "Any") {
// disable the select
$('.chosen-select').val('Any'); // Select Any and remove everything else
And here is a demo
I have a <select> element in my HTML that is bound via ng-model to an object in the scope.
Initially I want the dropdown to read "Group..." but when the user clicks on the control I want "Group..." to be renamed to "All" so that "Group..." can never be selected, in the same sense that sites use text boxes with default text that gives you a hint to what the form is for and disappears when it gets user focus (e.g. A "Search..." field).
Here is my JSFiddle example which isn't working as I expected: http://jsfiddle.net/TXPJZ/561/
I figured that ng-onclick="myOptions[0].label = 'All'" would work, it should change the value of the data structure that populates the dropdown and thus change the dropdown options but it doesn't.
How do I make this work like I want?
ng-click is the directive you want, not ng-onclick. Using that it seems to work the way you want it to:
http://jsfiddle.net/TXPJZ/562/
When trying to deselect the currently selected item in chosen through a knockout binding it seems to get reset back to what it was before the reset:
Here's the example:
http://jsfiddle.net/WPpH2/7
Select jQuery from the drop down and click "clear" to see this behavior.
Here's how the data bind is being done:
data-bind="value: selected, chosen: {}">
Any thoughts on how I can make this actually reset?
The reason you're seeing this is because of how the control works. When you click clear, you set the observable to null. The plugin then tries to find an option that has the value null. Because it doesn't find it, it resets your selection to what was last selected.
In your jsfiddle, if you change this line:
myViewModel.selected(null);
to this line:
myViewModel.selected("");
then your example will work. The reason is that you have an option where the value is an empty string.
Also, if you want your plugin to update on the UI, you will need to use this as well:
$(".chosen").trigger("chosen:updated");
So I'm using the pretty nice jQuery plugin, Chosen; http://harvesthq.github.com/chosen/
What I'm doing is actually working with TWO Chosen style dropdowns in an 'either/or' fashion, ie the user needs to select an option from one OR the other.
So when the user selects one of the dropdowns, the other one (via javascript) gets set back to its default disabled value.
Both dropdowns are backed by ONE hidden parameter to actually hold the selected value, no matter which dropdown it came from. This is populated by having listeners on both dropdown's on the .chosen().change() event.
The only problem is, it doesn't appear to fire a "change" event when the user selects one of the first options in either dropdown, I guess as this appears to be the already selected option and is therefore not a "change". But both dropdowns actual first option (ie in the jsp) is a disabled option with the normal "Please select" text.
Is there a way to fire the change event even if the option selected was already selected? Or is there just a "select" event that fires even if there hasn't been a change?
you can use .trigger("change"), or .change() on your jquery object to manually trigger the change event.
This worked for me:
//Get the dynamic id given to your select by Chosen
var selId = $('your_select').attr('id');
//Use that id to remove the dynamically created div (the foe select box Chosen creates)
$('#'+ selId +'_chzn').remove();
//Change the value of your select, trigger the change event, remove the chzn-done class, and restart chosen for that select
$('#'+selId).val('your_new_value').change().removeClass('chzn-done').chosen();
In a nutshell you are hard reseting chosen for your select. There might be an easier way than this, but this worked for me.
I just had the same problem using Select2 plugin (remake of Chosen plugin).
I forgot the line "allowClear: true" when I 've declared the Combobox as a select2 one.
$('#selectLabelMap').select2({
placeholder: "Sélectionner un label",
allowClear: true // <= don't forget "allowClear: true (re-init the comboBox)
}
Trigger the change first time when (DOM) is ready.
jQuery(function ($) {
$('#myselect').trigger("change");
});