How to get combo values from json in plain javascript.

Question

I am trying to create a Multi Select ComboBox. Here is my code.

Now my quesry is how can I get the value dynamically. Like from JSON and XML. Current it is hard coded but I want this to be from JSON.

My Code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://ajax.googleapis.com; style-src 'self'; img-src 'self' data:">
</head>
<body>
  <form>
    <div id="container">
      <div id="content">
        <div class="side-by-side clearfix">
            <div>
              <select data-placeholder="Choose a Country..." class="chosen-select" tabindex="4">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
              </select>
            </div>
        </div>
    </div>
  </form>
</body>
</html>

I want in plain javascript. For that I tried this but don't know how to implement this.

Js Code.

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "/rest/computer");
    httpRequest.send();
    return httpRequest.responseText;
}

Any idea how to get this.

you want to dynamically load the country options name when the webpage is loaded ? — warl0ck, May 02 '17 at 07:50
Your foo is wrong. You cannot return a response from async. You need to add code - please search google for XMLHttpRequest — mplungjan, May 02 '17 at 07:53
@mplungjan By this i can data the link which you mentioned for duplicate but how I can set it up in my html code for `select ` tag. — shanky singh, May 02 '17 at 07:57
@shankysingh in what manner you are getting the data from the server ? — warl0ck, May 02 '17 at 07:57
you might wanna get at this question http://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery which is almost similar to what you are asking — warl0ck, May 02 '17 at 07:59
@warl0ck JSON. `[{id:0, value: "USA"},{id:1,value :"UK"}]... This could be xml also. — shanky singh, May 02 '17 at 07:59
@warl0ck yes checking. But Don't wann use jquery to fetch the data — shanky singh, May 02 '17 at 08:00
you can still use xhrhtmlrequest from this question http://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest and you can then edit your code something like https://jsfiddle.net/1jxdonfs/ — warl0ck, May 02 '17 at 08:05

How to get combo values from json in plain javascript.

0 Answers0