Populate html select options via http request

Question

I have a drop-down that I've been hardcoding but would like to talk with an api to get values. Example here:

<div class="ui-widget">
  <label>Your preferred programming language: </label>
  <select id="combobox">
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
    <option value="Asp">Asp</option>
    <option value="BASIC">BASIC</option>
    <option value="C">C</option>
    <option value="C++">C++</option>
    <option value="Clojure">Clojure</option>
    <option value="COBOL">COBOL</option>
    <option value="ColdFusion">ColdFusion</option>
    <option value="Erlang">Erlang</option>
    <option value="Fortran">Fortran</option>
    <option value="Groovy">Groovy</option>
    <option value="Haskell">Haskell</option>
    <option value="Java">Java</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Lisp">Lisp</option>
    <option value="Perl">Perl</option>
    <option value="PHP">PHP</option>
    <option value="Python">Python</option>
    <option value="Ruby">Ruby</option>
    <option value="Scala">Scala</option>
    <option value="Scheme">Scheme</option>
  </select>
</div>

Is there a way to populate all of the options given the api call will result in a list? I currently have a java controller mapped to a http request which returns a list. Just not familiar with html/js to know how to populate (or if it's possible) to populate the options from this call.

what have you tried? can you add some code to your question? — DaFois, Dec 14 '18 at 13:41
Hmm, I guess I didn't know how to really word my question. https://stackoverflow.com/questions/10233464/populate-select-box-options-on-click-with-javascript-jquery-with-json-data This sounds pretty similar to what I want to achieve. I haven't really tried much as I read through the doc for the select tag https://www.w3schools.com/tags/tag_select.asp and it didn't seem to provide anything related to populating the options. — Bill Costello, Dec 14 '18 at 13:49
Possible duplicate of [Populate Select box options on click with Javascript/Jquery with Json data](https://stackoverflow.com/questions/10233464/populate-select-box-options-on-click-with-javascript-jquery-with-json-data) — Heretic Monkey, Dec 14 '18 at 13:51

score 1 · Answer 1 · answered Dec 14 '18 at 13:46

1

Yes its quite easy, see this I just made:

let elements = ["hey", "you", "are", "beautiful"]

let select = document.querySelector("#myid")

for (let elt of elements){
  let option = document.createElement("option");
  option.text = elt;
  option.value = elt;
  select.appendChild(option);
}

<select id="myid">
  
</select>

answered Dec 14 '18 at 13:46

David Raluy

184
5

Would the first snippet refer to some javascript file? – Bill Costello Dec 14 '18 at 13:52
You can grab this from the Java with an xmlhttp request. For example in jQuery: `$.get("mylist.jsp",function() { let select = document.querySelector("#myid") for (let elt of elements){ let option = document.createElement("option"); option.text = elt; option.value = elt; select.appendChild(option); }})` – mplungjan Dec 14 '18 at 13:57

score 0 · Answer 2 · answered Dec 14 '18 at 13:48

function populateSelect(optionArray){
      document.getElementById("combobox").innerHTML = "";
      var optionList = "";
      for(var i=0;i<optionArray.length;i++){
        optionList += "<option value='"+optionArray[i]+"'>"+optionArray[i]+"</option>"
       }
      document.getElementById("combobox").innerHTML = optionList;
 }//End function

If you wanted a vanilla javascript way of implementing your solution. optionArray is an array of string which consists of the names of your data returned by the API.

score 0 · Answer 3 · answered Oct 13 '20 at 15:24

I'll share what I have:

This is the select html:

<select
id="doctor"
name="doctor"
class="form-control chosen-select"
data-source="/getDoctors"
data-valueKey="id"
data-displayKey="nombres"
data-displayApellidoP="apellidoP"
data-displayApellidoM="apellidoM"
onchange="updateSelects(this.id)">
</select>

So in the js code:

function loadSelects(callback){

    var count = $("select[data-source]").length;

    $('select[data-source]').each(function() {
      var $select = $(this);

      $select.append('<option></option>');

      $.ajax({
        url: $select.attr('data-source'),
      }).then(function(options) {
        options.map(function(option) {
          var $option = $('<option>');
          $option
            .val(option[$select.attr('data-valueKey')])
            .text(option[$select.attr('data-displayKey')]);
          $select.append($option);
        });
        if (!--count){
              callback();
          }
      });
    });
}

You just add it to the document ready:

$(document).ready(function() {
    loadSelects();
}

Lastly, make sure you /request (in this case /getDoctors) respond the json format.

Populate html select options via http request

3 Answers3