CODEWITHSUNDEEP
javascriptjqueryhtml
user81244
user81244

Reputation: 83

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

Upvotes: 1

Views: 551

Answers (10)

cнŝdk
cнŝdk

Reputation: 32145

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

Upvotes: 0

sktwentysix
sktwentysix

Reputation: 123

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:

$(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();
      }
    });
});
<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!

Upvotes: 0

Christopher D&#237;az
Christopher D&#237;az

Reputation: 346

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

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

Upvotes: 0

Banwari Yadav
Banwari Yadav

Reputation: 506

I hope your problem will resolve, Please use the below code. Please vote for me if my answer right for your question.

$(document).ready(function () {
    $('#ddlOption').change(function () {
var val=$("#ddlOption").val();
$("#content-display").html('');
   $("#content-display").append(val)
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<select id="ddlOption">
  <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>

Upvotes: 0

0xdw
0xdw

Reputation: 3842

Assuming your want to load content from url.Use Ajax, it's easily can load contents without page reload.

var toggleContents = document.querySelectorAll('.toggleContent');

if (toggleContents) {

  for (var i = 0; i < toggleContents.length; i++) {
    toggleContents[i].addEventListener('change', changeContent, false);
  }

}

function changeContent() {
  var content = document.querySelector(this.dataset.content);
  if (content) {

    var xhttp = new XMLHttpRequest();

    var url_id = '#main-content';

    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        content.innerHTML = xhttp.responseText;
      }
    };
    xhttp.open("GET", this.value + url_id, true);
    xhttp.send();


  }

}
<select class='toggleContent' data-content='#content-display'>

  <option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Content 1</option>

  <option value="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">Content 2</option>

  <option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">content 3</option>

  <option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Content 4</option>
</select>

<div id="content-display"></div>

Upvotes: 0

Dhwanil Vyas
Dhwanil Vyas

Reputation: 1

Here's the solution

$('#content').change(function() {
    $('#content-display').html($(this).val())
});

Upvotes: 0

Riddell
Riddell

Reputation: 1489

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 in docs

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

Upvotes: 0

Rahul
Rahul

Reputation: 229

Hello there you can try this

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

Upvotes: 1

Luke
Luke

Reputation: 2063

(If you're comfortable with using jquery)

$("#select_id").on("input", function(e){
  $("#content-display").text($(this).val())
});

Here's a fiddle of it working. on works best for listening for events.

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need change event for select, on which you get the html from selected option value url using jquery get method and then set returned html to required div:

var content_display = $('#content-display');
$('select').change(function(){
    $.get(this.value, function( pagehtml ) {
      content_display.html( pagehtml );
    });
});

Upvotes: 1

Related Questions