Question

我有两个四个dropdown，第二个dropdown被选择，如果我选择第一个dropdown，第二个dropdown会填充值，但显示的是最后一个元素，而不是第一个< / p>

   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

Answer 1

this.sendvalue.map(...)将更新<option>元素的状态（属性和内容），但不一定会替换它们。这意味着，当您更改列表时，第一个选项的文本将从SGD更改为THB，但是第二个选项（USD）仍将被选择。

如果要控制选择状态，则需要存储选择状态，并将其用于项目模板：

this.sendvalue.map((currency, index) => currency.currency_from.map((send) =>
    html`<option value=${send} ?selected=${index === selectedIndex}>${send}</option>`))

在这里，我正在使用变量selectedIndex存储所选索引。更改国家/地区时，您必须将其重置。

选择下拉列表将首先显示最后一个值

1 个答案: