React Semantic Ui dropdown set dynamically - javascript

I am using react-semantic-ui
Here is the scenario:
I have two (2) dropdowns with placeholders, I am setting the 2nd Dropdown's option dynamically when I choose from the 1st dropdown. Then I would choose an item from the 2nd dropdown.
Then, If I changed the value of the 1st dropdown, it should change the values of the 2nd dropdown again, I have no problems with that but I want to set the placeholder back again
Summary: First I chose an item from the 1st dropdown, that sets the options of the 2nd dropdown. Then I choose an item from the 2nd dropdown, then I choose AGAIN from the 1st dropdown and that resets the options of the 2nd dropdown but that placeholder is not showing anymore.

Related

AngularJS. When changing the selected item in one combobox, how to clear the selected item in another combobox?

I have two combobox.
They are connected to each other. When an element is selected from the first combobox, the other combobox receives the corresponding data.
But when I select another item from the first combobox, the second combobox still shows the selected item from the generated data on the first select. The question is how to make it so that when an element is selected from the first combobox, the second one becomes clear and shows the standard writing?

Antd - Multiple select boxes remove items already selected

I have multiple antd select boxes rendered in a list. Options are populated via an array variable. If I have a value chosen in one select box I don't want to render it as an option in other select boxes. Do I just have to store a list for each select box for options or is there a simpler solution?

ng-select multiple checkbox selection

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?

Dropdowns in AngularJS

I have angularjs interdependable dropdowns, here is a demo plunker: http://plnkr.co/edit/mIFCKKO5Azr4ljyoge5r?p=preview. Now when I select an option from first(country) dropdown, I want the second (state)dropdown to be displayed as a checkbox dropdown and not the normal dropdown(like in the above plunker) and after selecting option from second multiple dropdown I should get another multiple dropdown again. Here is a sample checkbox dropdown, fiddle: https://jsfiddle.net/michaeldeongreen/22et6sao/9/ need this to be displayd for both state and city dropdowns in my plunker.
Finally when I select a country from first normal dropdown, the second multiple dropdown menu with checkbox for selecting a state should be enabled and after selecting a state, another checkbox dropdown menu for selecting city have to be enabled. Until I select an option from first dropdown, the second and third dropdowns have to be disabled and till I select option from second dropdown third dropdown has to be disabled.
Hope anyone will help me. Thanks in advance!!

Glitch fix for chosen multiselect dropdown

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

Categories