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: 
On the select change event:

1. **Get the selected option value.**
2. **Create an iframe with this value as src attribute.**
3. **And append it to your div.**

This is your way to go:

```js
function displayOption(select) {
  var frame = document.createElement("iframe");
  frame.src = select.value;
  document.getElementById("content-display").innerHTML = "";
  document.getElementById("content-display").appendChild(frame);
}
```

```html
<select onchange="displayOption(this)">
  <option value="http://example.com/1">Content 1</option>
  <option value="http://example.com/2">Content 2</option>
  <option value="http://example.com/3">content 3</option>
  <option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>
```

**This is a jquery solution:**

```js
//This code will initialize the div content
//You can use an id with the select if you have many dropdowns in the page
var dropdown = document.getElementsByTagName("select")[0];
$('#content-display').load(dropdown.options[0].value);

function displayOption(select) {
  $('#content-display').load(select.value);
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select onchange="displayOption(this)">
  <option value="http://example.com/1">Content 1</option>
  <option value="http://example.com/2">Content 2</option>
  <option value="http://www.google.com">content 3</option>
  <option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>
```

**EDIT:**

To answer your question about loading a div content from the other page:

If you need to load an external div content, you can use:

```
function displayOption(select) {
      $('#content-display').load(select.value+" #other-page-div-id");
}

```
If you would want to do this you can use jQuery AJAX GET or load request and simply feed the selector of the content you want form the page. The only thing is you HAVE to be on the same domain because of Cross Domain Policy.

You can take a look at [jQuery Load](http://api.jquery.com/load/) in docs

```
$(document).load('test.html #container', fucn...) // Returns #container

```