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
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 );
});
});
Hello there you can try this
$(select).on('change', function(){
$(#content-display).text($(this).val());
})
On the select change event:
Get the selected option value.
Create an iframe with this value as src attribute.
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");
}
(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.
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
Here's the solution
$('#content').change(function() {
$('#content-display').html($(this).val())
});
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>
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>
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>
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!
Related
Thank you in advance or any help you can offer. I am building a menu with selection and options. After a chapter is selected, it will display the page options available. However, I would like it to default to showing the chapter one pages when the website first loads, instead of showing nothing. I can't seem to figure this one out. The code I have is as follows:
<script>
window.onload = function() {
document.getElementById("Chapter").onload = function () {
if (this[this.selectedIndex].value === "1") {
document.getElementById("c1").className = "show";
}
};
</script>
<script>
document.getElementById("Chapter").onchange = function () {
if (this[this.selectedIndex].value === "1") {
document.getElementById("c1").className = "show";
} else {
document.getElementById("c1").className = "";
}
if (this[this.selectedIndex].value === "2") {
document.getElementById("c2").className = "show";
} else {
document.getElementById("c2").className = "";
}
};
</script>
The onload code currently does nothing, but the onchange works as anticipated.
Thank you so much for your time.
Edit:
The HTML example is as follows:
<div class="jump-options text-center">
QUICK JUMP: CHAPTER
<select id="Chapter">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select> PAGE
<select id="c1" name="Page">
<option value="1p0">0</option>
<option value="1p1">1</option>
<option value="1p2">2</option>
<option value="1p3">3</option>
<option value="1p4">4</option>
<option value="1p5">5</option>
</select>
<select id="c2" name="Page">
<option value="2p0">0</option>
<option value="2p1">1</option>
<option value="2p2">2</option>
<option value="2p3">3</option>
<option value="2p4">4</option>
<option value="2p5">5</option>
</select>
</div>
Most DOM elements don't have onload events. This event only fires on elements that need to get their contents from external sources, like images and iframes.
You don't want to assign an onload handler, what you want to do is trigger the change event on #Chapter.
window.onload = function() {
document.getElementById("Chapter").dispatchEvent(new Event("change"));
}
I am trying to load html page, based on dropdown selection. It works fine when selections are made. But want to load default page with default dropdown selection. Here is my code. Please help.
<!DOCTYPE html>
<html>
<head>
<style>
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
function showSelected(sel) {
locations = ["",
"/default.asp",
"test2.html",
"//example.com"
];
srcLocation = locations[sel.selectedIndex];
if (srcLocation != undefined && srcLocation != "") {
document.getElementById('content').innerHTML = '<iframe src="' + srcLocation +
'" width="100%" height="100%" frameborder="no" scrolling="auto"></iframe>';
//document.getElementById('content').innerHTML = "<br>Page Doesn't exists<br>";
}
}
$(function() {
$("select#page_selected").val("default.asp").change();
});
</script>
</head>
<body>
<select id="page_selected" onchange="showSelected(this);" onload="showSelected(this);">
<option value="">select an option...</option>
<option value="default.asp">Page 1</option>
<option value="test2.html">Page 2</option>
<option value="Page3.html">Page 3</option>
</select>
<div id="content"></div>
</body>
</html>
Something similar to below should do the work.
<select onchange="showSelected(this);" onload="showSelected(this);">
<option value="">select an option...</option>
<option value="default.asp" selected="selected">Page 1</option>
<option value="test2.html">Page 2</option>
<option value="Page3.html">Page 3</option>
</select>
Well HTML have an attribute for this, you can simply use selected attribute in your wanted option:
<select onchange="showSelected(this);">
<option value="">select an option...</option>
<option selected value="default.asp">Page 1</option>
<option value="test2.html">Page 2</option>
<option value="Page3.html">Page 3</option>
</select>
Your select does not have a page_selected id. Also there's a typo in default.asp
Without select id your code would have to be:
$(document).ready(function() {
$("select option").filter(function() {
return $(this).val() == "default.asp";
}).prop('selected', true);
//showSelected();
});
You could also use something like:
$(document).ready(function() {
$("select option[value='default.asp']").prop('selected', "selected");
//showSelected();
});
EDIT: to call the showSelected() after that, you'll need to pass in the $("select") object, but you could also just trigger the change event:
$("select").trigger("change");
Of course you'd want to add an id to your selectors!
EDIT: and you're not getting any errors in your console? For instance an error saying showSelected is not defined.
Here's a working fiddle: https://jsfiddle.net/oc8xcyce/
Even shorter: set the select value: https://jsfiddle.net/oc8xcyce/1/
I have two items: a Select List and a Display Image. The Select List has three values for the user to choose from. If the user selects on of the values then the Image View will show a related image with the selected value and if the selected value of the Select List will switch also change the picture.
I tried putting the script in the section: JavaScript -> "Function and Global Variable Declaration" of the page, but not run.
<script language="JavaScript" type="text/javascript">
function setValueDisplayImage(){
if ($("#SELECT_LIST").val() == 1) {
$("#DISPLAY_IMAGE").val('http://www.some.com/img1.jpg');
} else if ($("#SELECT_LIST").val() == 2) {
$("#DISPLAY_IMAGE").val('https://www.some.com/img2.jpg');
} else if ($("#SELECT_LIST").val() == 3){
$("#DISPLAY_IMAGE").val('http://www.some.com/img3.jpg');
}
}</script>
Use jquery on() like,
$(function(){
$("#SELECT_LIST").on('change', function(){
var val=this.value;
if(val==1 || val==2 || val==3){
$("#DISPLAY_IMAGE").val('http://www.some.com/img'+val+'.jpg');
}
});
});
$(function(){
$("#SELECT_LIST").on('change', function(){
var val=this.value;
if(val==1 || val==2 || val==3){
$("#DISPLAY_IMAGE").val('http://www.some.com/img'+val+'.jpg');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="SELECT_LIST">
<option value="1">First Image</option>
<option value="2">Second Image</option>
<option value="3">Third Image</option>
</select>
<br/>
<input id="DISPLAY_IMAGE" style="width:250px;"/>
And if your DISPLAY_IMAGE element is an img then your need to use attr() to change the image src like,
$(function(){
$("#SELECT_LIST").on('change', function(){
var val=this.value;
if(val){
$("#DISPLAY_IMAGE").attr('src','http://placehold.it/250x'+val);
}
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="SELECT_LIST">
<option value="">Select</option>
<option value="100">First Image</option>
<option value="150">Second Image</option>
<option value="200">Third Image</option>
</select>
<br/>
<img id="DISPLAY_IMAGE"/>
Ok, so I have an issue selecting all items in a multiple select in jQuery Mobile.
Here's the fiddle: http://jsfiddle.net/u41yk3fy/
HTML:
<div data-role="page" id="one">
<div data-role="content">
<label for="sel">Select the Options</label>
<select name="sel" id="sel" data-native-menu="false" multiple="multiple">
<option value="1">Prod 1</option>
<option value="2">Prod 2</option>
<option value="3">Prod 3</option>
<option value="4">Prod 4</option>
<option value="5">Prod 5</option>
<option value="6">Prod 6</option>
</select>
<div class="floatright" data-role="controlgroup" data-type="horizontal">
Select All
Deselect All
</div>
</div>
</div>
Javascript:
function selectAll(select) {
if (select == false) {
$("#sel option:selected").removeAttr("selected");
} else {
$("#sel option").attr("selected", "true");
}
$("#sel").selectmenu("refresh", true);
}
$(document).ready(function () {
$('#selectall').click(function (event) {
return selectAll(true);
});
$('#deselectall').click(function (event) {
return selectAll(false);
});
});
Basically on Chrome, Opera and Safari this actually works. Using IE and Firefox if you select all and deselect all, attempting to select all again no longer works. I have a feeling that this might be a jQuery, jQuery Mobile or Javascript issue and not something I'm doing wrong. However, if I am doing something wrong I'd appreciate the input.
You can try this:
function selectAll(select) {
if (select == false) {
$("#sel").val([]);
} else {
$("#sel option").prop("selected", true);
}
$("#sel").selectmenu("refresh", true);
}
Here is a Demo.
i have a question regarding Jquery
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"> disabled till you make a choice</div>
while the select menu have the choice Select box i need the div to be shown as a small black screen with the disabled message
once the user change the select menu and choose another option the value div shown the selected option for example Box 1 or Box 2
$(document).ready(function() {
// event triggered when options changed
$('#thechoices').change(function() {
// check if first option or other is selected
if ($(this).val() == 0) {
$('#value').addClass('disabled');
$('#value').html($('#value').data('default'));
} else {
$('#value').removeClass('disabled');
$('#value').html($(this).val());
}
});
});
Check out the fiddle: http://jsfiddle.net/gwKfP/1/
Here is a working Example: http://jsfiddle.net/sHqFX/
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"></div>
Put this between head tags
<script type="text/javascript">
$(document).ready(function(){
$("#thechoices").change(function(){
if($(this).val() == 0)
{
$("#value").html("disabled till you make a choice");
$("#value").css("background-color","black");
$("#value").css("color","white");
}
else{
$("#value").html($("#thechoices option:selected").text());
$("#value").css("background-color","white");
$("#value").css("color","black");
}
});
});
</script>
Here's a quick solution, just add this code:
CSS:
<style>
.disabled{
background-color: gray;
}
</style>
JavaScript
function onSelectedOption(){
var selectedText = $("#thechoices option:selected").text();
if($("#thechoices").val() == "0")
$('#value').addClass("disabled").text(selectedText );
else
$('#value').removeClass("disabled").text("");
}
$(document).ready(function(){
onSelectedOption(); //With this we 'disable' when page loads
$('#thechoices').change(onSelectedOption);
});
Hope this helps
Use the jQuery 'change' event. http://api.jquery.com/change/
$('#thechoices').change(function(){
$('#value').css('display','block');
});
$('#thechoices').change(
function() {
$('#value').text(
$('#thechoices :selected').text()
)
}
);