我想知道如何使用 litelement 中的图像实现 select2 下拉菜单。因为我有动态选项值,如何在 litelement 中使用选项文本框和标志实现选择
我在下面提到了源代码,请知道如何使用标志选择 litelement 中的动态选项
//my-element.js
import {
LitElement,
html,
css
} from "https://unpkg.com/@polymer/lit-element/lit-element.js?module";
export class Calculator extends LitElement {
static get properties() {
return {
otherCountries: { type: Array }
};
}
constructor() {
super();
this.otherCountries = [
//drop down list
"Austria",
"Belgium",
"Bulgaria",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
];
}
render() {
return html`
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<form id="form_values" class="form-inline" role="form" autocomplete="off">
<div class="col-7 form-group mr-auto">
<div class="arrowicon">
<select
style="width: 170px"
name="sourcecountrycode"
class="calcFont form-control"
id="sourcecountrycode"
@change="${this.sourcecountryChange}"
value=""
>
${this.countrydata.countries.map(
(country, key) => html`
<option value=${country.country_code}
>${country.country_name}</option
>
`
)}
</select>
</div>
</div>
</form>
`;
}
}
customElements.define("calculator-home", Calculator);