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");
}

```
You can use jQuery in order to do this stuff more easy:

So, the content maybe can't be loaded because of **Access-Control-Allow-Origin**, this happens when you trying to access a URL you don't own or is reestricted.

Check the code here

```js
jQuery(document).ready(function(){
  jQuery("#select-content").change(function(){
      var content_url = jQuery("#select-content option:selected").val();
      if(content_url){
          jQuery("#content-display").load(content_url);
        }
    });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select-content">
  <option value="">-- select content --</option>
  <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>
```