I wanted to unselect the Input box once the close button is selected after the option is selected
I have attached codesandbox link
Current output
When user select the option value is displayed when close icon is clicked it removes the option but select box is selected unless you click outside, it un-selects the box
expected output
When user select the option value is displayed when close icon is clicked it removes the option and un-selects the box as well.
You are talking about something named 'focus'.
This is actually built-in browser behavior, so if you want it to lose focus in some cases you can do it programmatically using refs.
Here is a link to guide where you can find how to do it
Related
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.
As the title suggests, I've found the ClassName of the button I want to click (I think, because the innertext on that ClassName array # gives me the correct text shown on button). Problem is, I'm clicking it but it does nothing.
This is my best attempt, among dozens, but it's not doing anything.
For Each i In IE.document.getElementById("typeSelector")
If i.innerText = "Revenue" Then
i.Click
i.FireEvent ("onchange")
'This click and fireEvent are activated but do nothing.
End If
Next i
'These next ones are Hail Mary's stacked on top of each other to see if I get a reaction out of that damn box. Nada.
Debug.Print IE.document.getElementsByClassName("chzn-single chzn-default")(0).innerText 'Prints "Select an option". I thought clicking this would at least open the drop down menu but still, nothing.
Debug.Print IE.document.getElementById("typeSelector_chzn_o_14").innerText 'Prints "Revenue". This is the option within the dropdown menu, shown after clicking the menu when manually done.
IE.document.getElementsByClassName("chzn-single chzn-default")(0).Click
IE.document.getElementById("typeSelector_chzn_o_14").Click
To summarize, I've tried activating the option based on index, clicking the box, clicking the box then clicking the "Revenue" option. The website remains completely unmoved. Should be noted that a succesful click would not update the website, simply highlight the "Revenue" option in the menu, and open up a Date input box.
So whats going on is that I have a site that I have taken on for my work. I have two select boxes I am tying into. The problem is when you click the second select box and choose an option it uses ajax to load a second box next to it (a hierarchical select box). The code that I am using is simple and changes the value of the second box back to the "select" option state when the first box is changed. But what it is not doing is creating click state (sorry if I am saying that wrong) but in order for ajax to bring in and remove the third select box the second select box option needs to be clicked.
Is there a way for me to re-create a "click" of the select box.
Here is the jquery:
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select').val('select');
});
Here is a sample fiddle. See this Fiddle
I am not entirely sure, what exactly you are looking for but I feel that this should do the trick:
https://jsfiddle.net/vuvckm3u/5/
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select option:first-child').attr('selected', true);
});
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 am trying to dynamically append options in a combo box.
How does button click event work in a combo box element? I am using change event. But I need button click event in the combo box. How can I 'uniquify' the combo box element in jquery?
You are doing it wrong, add a button to add options to a combo box.
OR, add a default option like:
<option value="default">Make a choice...</option>
Then if a user cancels the dialog box, change the selected option on the combo box to default. So, when they want to add another option, they will have to click on the drop down box to choose the - add - option again.