Как назначить уникальные значения выпадающему списку, загруженному асинхронно - PullRequest
Новая
       9

Как назначить уникальные значения выпадающему списку, загруженному асинхронно

0 голосов
/ 24 декабря 2018

Я успешно загрузил данные из API в виде выпадающего списка, и я хочу получить значение каждого параметра при выборе.Как назначить уникальные значения для каждой опции?также, как я могу получить выбранное значение?

HTML 

<div class="cur-conv-container">
    <select id="conv_from"></select>
    <input type="number" name="" id="num_from">
    <br><br>
    To: 
    <select id="conv_to"></select>
    <br><br>
    <a href="#" id="conv-btn" class="btn btn-warning btn-cur-conv " onclick="convert()">Convert</a>
</div>

JAVASCRIPT 

<script type="text/javascript">

function loadCurrency(){ 
    var url = "https://free.currencyconverterapi.com/api/v6/currencies";
    var currency ;
    var allCurr;
    var currencyFrom = document.getElementById("conv_from");
    var currencyTo = document.getElementById("conv_to");

    var xhttp = new XMLHttpRequest;

    xhttp.onreadystatechange = function(){
        if(xhttp.readyState==4 && xhttp.status==200){
            currency = JSON.parse(xhttp.response);
            allCurr = currency.results;
            for(x in allCurr){
            currencyFrom.innerHTML += "<option>" + x + "</option>";
            currencyTo.innerHTML += "<option>" + x + "</option>";
            }

        }
    }
    xhttp.open("GET", url, true);
    xhttp.send();
}
</script>

1 Ответ

0 голосов
/ 24 декабря 2018

Если я правильно понимаю ваш вопрос, то вы хотите извлечь id каждого элемента валюты, возвращенного из API, и использовать его для значения ваших <select> вариантов.

Этоэто можно сделать, внеся следующие изменения в обработчик onreadystatechange: 

xhttp.onreadystatechange = function(){
    if(xhttp.readyState==4 && xhttp.status==200){
        currency = JSON.parse(xhttp.response);
        allCurr = currency.results;
        for(x in allCurr){

        // Extract the currency item for current key "x"
        var currency = allCurr[x];

        // Extract currency id from current currecny item
        var currencyId = currency.id;

        // Use currencyId as value for select options being added
        currencyFrom.innerHTML += 
        "<option value='" + currencyId + "'>" + x + "</option>";
        currencyTo.innerHTML += 
        "<option value='" + currencyId + "'>" + x + "</option>";
        }

    }
}
...