user81244 user81244 - 7 months ago 13
Javascript Question

Select and display content from external div

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:

function displayOption(select) {
  var frame = document.createElement("iframe");
  frame.src = select.value;
  document.getElementById("content-display").innerHTML = "";
  document.getElementById("content-display").appendChild(frame);
}
<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:

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