In the example below I have a selection box that for each selection made, a link is displayed
function AbrirSecao(secao) {
let display = document.getElementById('content')
display.textContent = secao
}
<select name="unidade" id="unidade" onChange="AbrirSecao(this.value)">
<option value="">Selecione sua Cidade</option>
<option value="http://www.google.com.br#one">Sua Cidade 1</option>
<option value="http://www.google.com.br#two">Sua Cidade 2</option>
</select>
<p id="content"></p>
Instead I needed that when selecting the option the page would load the content of an external page, as below:
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula
tortor metus, laoreet condimentum urna aliquet vitae. Aliquam eu felis
malesuada, maximus risus nec, aliquet leo</p>
Unless the websites you want to load data from are on the same domain as yours, you will be blocked by CORS policy.
If you have control over the website servers you need to grab content from, you can use fetch():
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
More on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Here is an example using fetch() https://jsfiddle.net/v4uL0na2/ The second option returns HTML from the JSFiddle home page. The second option results in an error because of CORS.
function AbrirSecao(secao) {
let display = document.getElementById('content')
fetch(secao).then(function(response) {
// The API call was successful!
return response.text();
}).then(function(html) {
// This is the HTML from our response as a text string
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
const element = doc.querySelector('body > *');
display.appendChild(element);
}).catch(function(err) {
// There was an error
console.warn('Something went wrong.', err);
});
}<select name="unidade" id="unidade" onChange="AbrirSecao(this.value)">
<option value="">Selecione sua Cidade</option>
<option value="/">jsfiddle</option>
<option value="http://www.google.com.br#two">Sua Cidade 2</option>
</select>
<p id="content"></p>(The above code sample will not work here)
with Jquery use load(), its simple..
$('#siteloader').load('http://www.your-link.com');
function AbrirSecao(secao) {
$('#content').load(secao);
}
vanillaJS use fetch. try this :
function AbrirSecao(secao) {
fetch(secao)
.then(function(response) {
return response.text();
})
.then(function(body) {
document.querySelector('#content').innerHTML = body;
});
}