Display in select input the terms of previously selected Post - javascript

I am using Wordpress and elementor.
Structure is as below :
CPT named "company"
Custom taxonomy named "Sector" where: parent terms are considered as sectors
and child terms are considered as services
I need to create a multistep form :
Step 1 : select input with list of all companies (list of CPT posts)
Step 2 : select input with list of all sectors related to previously
selected company (List of parent taxonomies assigned to selected
post). Once selected, a second select input to select child terms assigned to parent that is assigned to post selected.
I must use Elementor form + dynamic.ooo. I am able to pull CPT posts in a select input but need help for step 2.
I have a possibility to use PHP or shortcodes in the select input value with dynamic.ooo to list whatever i want and i guess with some JS and PHP and a little help from you guys i will be able to do this correctly.
Thank you so much!

Related

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

Display dynamic items on page after initial page load

I am using ASP.Net mvc to render my html view.
The view contains a dropdown list and a label
I load drop down list using a collection in my view model.
Lets say that the collection is called fruit
IList<Fruit> fruit
Fruit is defined as
FruitId
Name
FruitType
The dropdown list will display each Fruit name and have a value of FruitId
When I change the value of the drop down list I want to have the value of my label display FruitType.
I can think of a couple ways of doing this:
Write out Label tags for all values of FruitType. Give a css class to display the first one on load and add javascript to show/hide labels in the select onchange event
Provide json array of Fruit in the html somewhere (I would serialise the Fruit list on page load and put the resulting script on the page somewhere). I would add javascript to the onchnage event of the select to search the json and change the label value accordingly.
I have 2 questions:
Am I missing something obvious, could this be done in a better way?
If no 2 is a good idea, where should I put the json in the html so that the js can use it?
Another approach is that when you generate the dropdown list, include a data-attribute, say data-fruit-type where you store the FruitType, then when the dropdown value changes, just read the data-fruit-type attribute from the selected item.

sap.m.select values not selecting correclty

I have a sap.m.inputlistitem with content as sap.m.select.
The list and select are binded to a JSON model.
The list is rendered with select(dropdown) values properly but the problem is......
when I select another element than default value in dropdown/select ,the value is not getting selected ,
ex:
lets say i had a dropdown with 3 values / 3 select options
sapui5
backbone
angualrjs
now, when i select backbone, from dropdown list ,its selected ,but when i want to select sapui5 again its not selected...
any ideas ????
sap.m.inputlistitem should not be a valid aggregation type for items aggregation of sap.m.Select.
UI5 Document for Select
Aggregations
items (default aggregation) : sap.ui.core.Item[]

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