Question: i tried to display external content `div` on select option. Here is example

```
    <select>
      <option value="http://www.indiansuperleague.com/atletico-de-kolkata/squad/midfielder-3986-arata-izumi-playerprofile">ARATA
IZUMI</option>
      <option value="http://www.indiansuperleague.com/atletico-de-kolkata/squad/midfielder-10724-borja-fernandez-playerprofile">BORJA
FERNANDEZ</option>
      <option value="http://www.indiansuperleague.com/atletico-de-kolkata/squad/midfielder-10249-clifford-rayes-miranda-playerprofile">CLIFFORD
RAYES
MIRANDA</option>
    </select>
    <div id="content-display"></div>

```

When select I want to display content inside `<div class="player-detailswrap">`. And first option as default.

Please Help

Answer: 
You need change event for select, on which you get the html from selected option value url using jquery get method and then set returned html to required div:

```
var content_display = $('#content-display');
$('select').change(function(){
    $.get(this.value, function( pagehtml ) {
      content_display.html( pagehtml );
    });
});

```
Assuming your want to load content from url.Use Ajax, it's easily can load contents without page reload.

```js
var toggleContents = document.querySelectorAll('.toggleContent');

if (toggleContents) {

  for (var i = 0; i < toggleContents.length; i++) {
    toggleContents[i].addEventListener('change', changeContent, false);
  }

}

function changeContent() {
  var content = document.querySelector(this.dataset.content);
  if (content) {

    var xhttp = new XMLHttpRequest();

    var url_id = '#main-content';

    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        content.innerHTML = xhttp.responseText;
      }
    };
    xhttp.open("GET", this.value + url_id, true);
    xhttp.send();

  }

}
```

```html
<select class='toggleContent' data-content='#content-display'>

  <option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Content 1</option>

  <option value="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">Content 2</option>

  <option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">content 3</option>

  <option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Content 4</option>
</select>

<div id="content-display"></div>
```