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: 
Hello there you can try this

```
$(select).on('change', function(){
  $(#content-display).text($(this).val());
})

```
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!