DropDown custom element for countries with flags

Ask the community
,
1

Im trying to make a form that user can select the country with the flag and displayed to an other page review page i tried this link [https://www.wix.com/corvid/example/dropdown-custom-element](https://www.wix.com/corvid/example/dropdown-custom-element) and already added countries with flags dropdown list using custom element and cant connect it with review page cannot connect it with dataset please any one can help me

925×550 39 KB

2

You can’t connect a dataset to a custom element.
You have to extract the data from the dataset/database and pas it to the custom element using .setAttribute() and recieving data back from the custom element using .on()

3

can you send me snipping code or link to help

4

i want to get the selected data in the custom element and send it to another database

5

external database?

6

How can we pass the objects & arrays to custom elements without using setAttribute? Is there any method while working with custom element like getters and setters like I’m trying to do in following example :

//Custom element code
class CustomList extends HTMLElement {
constructor() {
super();

this._items = [];

}
set items(value) {
this._items = value;
}

get items() {
return this._items;
}
}
customElements.define( “custom-list” , CustomList);

//Corvid code
var list = document.querySelector(“custom-list”); //How can attach custom element here in corvid

list.items = [1, 2, 3];
console.log(list.items); // → [1, 2, 3]

7

why wouldn’t you use setAttribute?

8

@jonatandor35 Because with this approach I can’t directly send objects I always have to stringify and parse the string.

9

@abhijeethealthier afaik you can’t avoid setAttribute when you want to pass data from Corvid to a custom element. You can either use JSON.stringify or you can process the data outside the custom element and pass the final html string.
For example if you have an array [{id: “abc”, text: “some sting”}, {id: “efg”, text: “other string”}], then you can use js to create a string like: <ul><li id="abc">some sting</li><li id="efg">other string</li></ul> and pass it to the custom element . What ever you find more coinvent.

10

Thanks @jonatandor35 for the quick reply. Yes I think I will go ahead with stringify