Change content within a dropdown On Select - javascript

I have a page in which the user needs to select a product based on drop down filtering. Consider four drop downs Category--> SubCategory-->Product---> Variant. Its not so user friendly when the user has to select value from each drop down to get the final variant. So I need to select all the values with a subnavigation within a single drop down. You can view what I mean in this link -- http://i.stack.imgur.com/YMoQX.gif
Please tell me how to do this.

I think you can split in three columns and using radio button group in each column to select category or product, filtering in each column

Related

Ant table column filter with search and select all

I want to add select all option in ant table column filter. I am able to do this by setting filterMode to true. But in this case searched value shown in bold letters and other options also visible. I want a search option to search matching records and then a select all option to select all sarched items. It should hide other records like it works without filterMode and a select all option. How can we achieve it.

Vue- How can I control the behavior of chips in v-autocomplete?

I have a 20-25 names coming from API where I'll need to show them in a drop down box (requirement). I'm using Vue v-autocomplete here to display the selected names on the field. I've used custom item called Select All where the user can select all the names in the drop down list, but what I also need to do when the user clicks on Select All is that I don't want to show all the names in the Autocomplete field including Select All Chip. Only items that are selected individually without Select All should show as Chips.
Here is my code sandbox I've attempted so far. I'm new to Vue js, so I'm hoping to get some thoughts on controlling the chips on v-autocomplete.
v-autocomplete sandbox
Instead of including "Select All" in the array of names, you can use the prepend-item slot to include a separate Select All checkbox.
If you need to differentiate between names selected via individual click and those selected via the Select All checkbox you will probably need a new property in the names array to track that, say a boolean that is true if selected one way and false the other.
You'll also need a slot like selection to customize the display of your chips where you can use v-if to conditionally render a chip based on that new boolean property.
This codesandbox I believe is pretty close to what you're after

cascading drop-down list in AngularJS

I have created three dropdown buttons and want to populate them on the basis of selection from previous button.The data is in an object array as below:
[{"LINK":"B_LINK_01","NAME":"name-04","TYPE":"BB"},{"LINK":"A_LINK_01","NAME":"name-01","TYPE":"BB"},{"LINK":"C_LINK_01","NAME":"name-03","TYPE":"AA"},{"LINK":"C_LINK_05","NAME":"name-04","TYPE":"BB"}]
First drop-down should contain all unique TYPE values. When one of the TYPE is selected, the second drop-down should populate with all the unique NAME values corresponding to TYPE. When NAME is selected from second drop-down then the third drop-down should populate with all corresponding LINK values. For ex: The first dd should show BB, AA in the list. if I select BB then second drop-down should populate with name-04 and name-01. Next, if I select name-04 then the third drop-down should populate with B_LINK_01 and C_LINK_05.
P.S. I have referred multiple tutorials and SO threads but did not find a solution relevant to the object array I have. Any help in Angular JS will be appreciated

dependent cascading drop down box list in AngularJS or jquery?

I am trying to implement dependent cascading drop down list in AngularJS. It is coming fine for: If I select any Country(say: Country1), then it's states(say: State1, State2, State3) are displaying in second drop down box(it's fine).
But my requirement is that: after displaying the above relevant states for a country, I need to display only that respective selected country for the given states in the first drop down box(say if I select either State1 or State2 or State3 of Country1 then Country1 should be displayed in the first drop down box(since Country1 is having those states), and other countries(Country2, Country3) should be disabled or disappeared or not visible in the first drop down box). Created Fiddle. Please help me that how can I implement it eihter in jquery or angularjs ? Thanks in advance.
if I write ng-diabled="cities" in the first drop down box, then it is working fine as per my requirement.

3rd dynamic dropdownlist value compare with 4th table value from botton -> show div?

Honestly been looking everywhere..
The traditional 3-dropdown list dynamically populated from database:
1st table gives airport departure
2nd table gives airports choices
from 1st choice
3rd table show routes between 1 and 2.
That works perfectly!!
When passenger chooses a route from the 3rd drop list I want to check if the value from 3rd dropdownlist is represented in a 4th table called "donations"
Some routes are marked for donation possibility where passengers can donate their unused baggagecapacity to charity
My last hurdle is:
when 3rd list is selected --> check for donationpossibilities--> if possible then show a hidden div on submit
...
I've tried and read so much and gotten a lot more clever and I think I have the query to check the values in order, but I'm lost...
Not sure what programming language you are using to load the dropdowns from your database, but one option that you could try is that when you are adding the html option elements to the 3rd dropdown list you could add a data attribute to each, for example:
<option value="route 1" data-can-donate="true">...</option>
Then if you are using jquery you could bind the change event to the 3rd dropdown and do something like this:
$('#ddlRoutes').change(function() {
var canDonate = $('#ddlRoutes > option:selected').data('can-donate');
if (canDonate) {
$('#myDiv').show();
}
};
Obviously this is untested but it may work for what you are trying to do.

Categories

Resources