Dropdown Call API From Ajax-CodePudding

How can I access the API from the drop-down list? My drop down are Price by Recyclables and Service charger. How can I do it?

This is a HTML code:

<div >
    <label for="text4" >Price Mode</label>
    <select  id="select-price-mode">
        <option value=""></option>
    </select>
</div>

This is my API using ajax:

$.ajax({
    // The url that you're going to post  This is the url that you're going to put to call the backend api, in this case, it's  https://ecoexchange.dscloud.me:8080/api/get (production env)
    url: "https://ecoexchange.dscloud.me:8080/api/get",
    // The HTTP method that you're planning to use i.e. GET, POST, PUT, DELETE  In this case it's a get method, so we'll use GET
    method: "GET",
    // In this case, we are going to use headers as 
    headers: {
        // The query you're planning to call i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
        query: "<query>",
        // Gets the apikey from the sessionStorage
        apikey: sessionStorage.getItem("apikey")
    },
    success: function (data, textStatus, xhr) {
        console.log(data);
    },
    error: function (xhr, textStatus, err) {
        console.log(err);
    }
});

And this my JSON response:

[
    {
        "PriceMode": "Price By Recyclables"
    },
    {
        "PriceMode": "Service Charger"
    }
]

CodePudding user response：

If I understand correctly, you are looking to add your AJAX results as <option> elements to your <select>. In your AJAX success handler simply loop over the resulting array and add each element as an <option>. For example:

success: function(data) {
    for (let option of data) {
        $('#select-price-mode').append($('<option>', {
            value: option.PriceMode,
            text: option.PriceMode
        }));
    }
}

Caveat: If you have many options then this could reduce performance. In cases like that it may be preferable to build one big HTML string of <options> and append the whole thing to the <select> afterward. Though in cases where there are many options you'd probably want to re-think using a simple <select> anyway.