Выберите раскрывающийся список, сначала показывает последнее значение

У меня есть две четыре dropdown, выбрана вторая dropdown, и если я выберу первую dropdown, вторая 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
256
1

Ответы 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 для хранения выбранного индекса. При смене страны его нужно сбросить.

Другие вопросы по теме