2 つdropdown
の 4 があり、2 番目dropdown
に選択され、first を選択するとdropdown
、2 番目dropdown
に値が入力されますが、最初ではなく最後の要素が最初に表示されます
sample data get the dropdown values
var countrydata ={
countries:[{
"country_code": "TH",
"country_name": "Thailand",
"currency_from": [
"THB",
"USD"
],
"currency_to": [
"THB"
],
"popular_to": [
"Malaysia",
"Myanmar"
],
"name": {
"en": "Thailand",
"th": "ประเทศไทย"
},
"normalized_name": {
"en": "thailand"
}
},
{
"country_code": "SG",
"country_name": "Singapore",
"currency_from": [
"SGD",
"USD"
],
"currency_to": [
"SGD"
],
"popular_to": [
"India",
"United States"
],
"name": {
"en": "Singapore",
"fr": "Singapour",
"zh": "新加坡"
},
"normalized_name": {
"en": "singapore"
}
}]
}
var currencydata = {
currencies:[{
"currency": "SGD",
"country_code": "SG",
"country_name": "Singapore",
"name": {
"en": "Singapore Dollar",
"fr": "Dollar Singapour",
"zh": "新加坡元"
},
"default_amount": "1000"
},
{
"currency": "THB",
"country_code": "TH",
"country_name": "Thailand",
"name": {
"en": "Thailand Baht",
"th": "เงินบาทไทย"
},
"default_amount": "9000"
},
}]}
index.js file sample
updateSendCountry(value) {
this.sendvalue = this.countrydata.countries.filter(function (item) {
return item.country_code == value;
})
if (this.sendvalue && this.sendvalue[0].currency_to) {
var sendcurrency = this.sendvalue[0].currency_to[0];
this.updateSendCurrency(sendcurrency);
}
}
updateSendCurrency(e) {
this.ccyvalue = this.currencydata.currencies.filter(function (item) {
return item.currency == e;
})
}
<select name="send_country" class="form-control" id="send_country" @change="${this.sendcountryChange}">
${this.countrydata.countries.map((country, key) => html`<option value=${country.country_code}>${country.country_name}</option>`)}
</select>
</div>
<div class="input-group p-2">
<div class="input-group-prepend">
<select name="sccy" class="form-control" id="sccy" @change="${this.updateSendCurrency}">
${this.sendvalue.map((currency) => currency.currency_from.map((send) =>
html`<option value=${send}>${send}</option>`))
}
</select>
例えば:
Dropdown A -> Singapore populates Dropdown B -> SGD, USD
Dropdown A -> Thailand populates Dropdown B -> THB, USD
if dropdown A selection shows Singapore, SGD USD in Dropdown B
if USD selected in Dropdown B then i change Dropdown A to thailand it Dropdow B
populates THB, USB but shows USD first(second option) rather than THB