select dropdown shows last value first

Question

I have two four dropdowns, second dropdown selected and if I select first dropdown, second dropdown populates the value but shows last element first instead of first

   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>

eg:

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

score 0 · Answer 1 · answered Mar 17 '19 at 23:38

this.sendvalue.map(...) is going to update the state (attributes and content) of the <option> elements, but it won't necessarily replace them. This means that when you change the list, the first option will have its text changed from SGD to THB, but the second option (USD) will still be selected.

If you want to control the selection state, you'll need to store it and use something like this for your item template:

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

Here I'm using a variable selectedIndex to store the selected index. You'd have to reset it when changing the country.

select dropdown shows last value first

1 Answers1