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

```
The best way to achieve this would be some simple jQuery functions. In this example, there are 4 divs with different content in each. All are hidden by default.

Then you can use a bit of jQuery to hide and show certain divs based on the selection you make:

```js
$(document).ready(function(){
  $('.hidden').hide();
  $('#dropdown').on('change', function() {
      if (this.value == 'defaultoption') {
        $('.hidden').hide();
      }
      else if (this.value == 'select1') {
        $('.hidden').hide();
        $("#content1").show();
      }
      else if (this.value == 'select2') {
        $('.hidden').hide();
        $("#content2").show();
      }
      else if (this.value == 'select3') {
        $('.hidden').hide();
        $("#content3").show();
      }
      else if (this.value == 'select4') {
        $('.hidden').hide();
        $("#content4").show();
      }
      else
      {
        $("#content-display").hide();
      }
    });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="defaultoption">Select Content</option>
  <option value="select1">Content 1</option>
  <option value="select2">Content 2</option>
  <option value="select3">Content 3</option>
  <option value="select4">Content 4</option>
</select>

<div id="content-display">
  <div id="content1" class="hidden">This is some text for content 1</div>
  <div id="content2" class="hidden">This is some text for content 2</div>
  <div id="content3" class="hidden">This is some text for content 3</div>
  <div id="content4" class="hidden">This is some text for content 4</div>
</div>
```

Hope this helps!