What I want to reach:
Show an image depending on select box selection. But I don't want to take attribute value="", I want to take a custom attribute data-img="" instead.
This is the code I actually have, but it's not working:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
function showFormatImage() {
var image = document.getElementById("itemImage");
image.src = $('select[name=itemImage] option:selected').data('img');
return false;
}
document.getElementById("itemImage").onchange = showFormatImage;
</script>
</head>
<body>
<select id="itemImage" name="itemImage">
<option data-img="first.png">First</option>
<option data-img="second.png">Second</option>
<option data-img="third.png">Third</option>
</select><br>
<img id="itemImage" src="">
</body>
</html>
No image is shown. Does anybody know what's wrong?
P.S.: If there's a non-Javascript solution, that would be even better but I don't think there is.
var image = document.getElementById("itemImage");
var image is the select - not the img, also - itemImage does not exist at time of execution so the event handler isn't placed.
you should change your code to:
<html>
<head>
<script>
window.onload = function() {
document.getElementById("itemImage").onchange = showFormatImage;
};
function showFormatImage() {
var image = document.getElementById("changeImage");
image.src = $('select[name=itemImage] option:selected').attr('data-img');
return false;
}
</script>
</head>
<body>
<select id="itemImage" name="itemImage">
<option data-img="first.png">First</option>
<option data-img="second.png">Second</option>
<option data-img="third.png">Third</option>
</select><br>
<img src="" id='changeImage'/>
</body>
</html>
jquery solution:
$(document).ready(function(){
$('#itemImage').change(function(){
var src = $(this).find('option:selected').attr('data-img');
$('img#changeImage').attr('src',src);
});
});
Should replace .data function with .attr(data-img)
Related
I'm trying to make an image change based on the dropdown/select option that a user chooses. However, I need to do this using a data attribute rather than the easier option value, since I need that to be used for something else. I can't seem to figure out what I'm doing wrong. The code I've attached doesn't target the data-image attribute. And ideas what I'm doing wrong?
Example Code:
<html>
<div>
*Flavor 1:
</div>
<div>
<select class="custom-cupcake-flavor" name="custom-cupcake-flavor">
<option data-image="noimage.jpg" value="">-- Please Choose an Option --</option>
<option data-image="Chocolate-Covered-Strawberry.jpg" value="Chocolate Swirl">Chocolate Swirl</option>
<option data-image="strawberryLemonade.jpg" value="Extreme Lemon">Extreme Lemon</option>
<option data-image="Cookie-Dough-Delight.jpg" value="Vanilla Blast">Vanilla Blast</option>
</select>
</div>
<br>
<div class="col-md-6">
<img id="uploadedImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=400%C3%97400&w=400&h=400">
<br>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div style="clear:both;"></div>
<script type='text/javascript'>
$(document).ready(function() {
var flavor;
var image_name;
$(".custom-cupcake-flavor").on('change', function() {
flavor = $(this).data("image");
image_name = ("/images/" + flavor);
$('#uploadedImage').fadeOut(200, function() {
$('#uploadedImage').attr('src', image_name).bind('onreadystatechange load', function() {
if (this.complete) $(this).fadeIn(400);
});
});
});
});
<!-- Hides Product Image when "No image" option is selected.-->
$(document).ready(function() {
$('.custom-cupcake-flavor').on('change', function() {
if (this.val() !== "") {
$("#uploadedImage").hide();
} else {
$("#uploadedImage").show();
}
});
});
</script>
</html>
You can use the :selected selector to get the selected option in your dropdown:
$('.custom-cupcake-flavor').on('change', function() {
var $option = $(this).find(':selected');
var imageUrl = $option.data('image');
// You might want to do something with imageUrl here:
$('#uploadImage').attr('src', imageUrl);
});
// If you want to run the above on initial load you can trigger the change event:
// $('.custom-cupcake-flavor').trigger('change');
So I'm pretty baffled with this issue I have here. I'm almost certain this code is correct yet the list box that I want to appear is not showing up at all after something is selected from the first drop down box. Here is what I have going for the code now
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function view_private_user_list(){
var i = document.status.private_users.options[document.status.private_users.selectedIndex].value;
if(i == 1){
document.getElementById('private_select_now').style.visibility="visible";
} else{
document.getElementById('private_select_now').style.visibility="visible";
}
}
</script>
</head>
<body>
<div id="show_private_option">
<select id="private_users" onChange="view_private_user_list()">
<option value="0" SELECTED>Select user....</option>
<option value="1">Vincent</option>
</select>
<div id="private_select_now" style="visibility:hidden">
<select size="3">
<option value="">{#template_dlg.select}...</option>
<option value="SOOOOLDmax.htm">SOOOOLDmax</option>
<option value="mike.htm">tester</option>
</select>
</div>
</div>
</body>
</html>
This fiddle should work:
http://jsfiddle.net/3XENR/1/
I think the way you're trying to find out the current value of the dropdown doesn't quite work.
Try this version of the function instead.
function view_private_user_list(){
var selectEl = document.getElementById('private_users');
var i = selectEl.value;
if(i == 1){
document.getElementById('private_select_now').style.visibility="visible";
} else{
document.getElementById('private_select_now').style.visibility="hidden";
}
}
Try:
document.getElementById('private_select_now').style.display ="block";
and
document.getElementById('private_select_now').style.display="none";
instead
instead of visibility, use display
<script type="text/javascript">
function view_private_user_list(){
var i = document.getElementById('private_users').selectedIndex.value
if(i == 1){
document.getElementById('private_select_now').style.display="block";
} else{
document.getElementById('private_select_now').style.display="none";
}
}
</script>
The following HTML code is working as expected. What I need is a drop down option where the user will select any platform and the righ frame will load the required file.
android form
J2ME form
windows form
The following html generates the drop down option but how to make the required pages load automatically?
<form>
Platform:
<select name='platform'>
<option>Android </option>
<option> J2ME </option>
<option> Windows </option>
</select>
</form>
<html>
<head>
<script type="text/javascript">
function loadFrame()
{
var s=document.getElementById("platform").value;
document.getElementById("loadContainer").innerHTML=""
var iframe = document.createElement("iframe");
iframe.src = s;
document.getElementById("loadContainer").appendChild(iframe);
}
</script>
</head>
<body>
<div style="float:left">
<form>
Platform:
<select id='platform' onchange="loadFrame()">
<option value="android.html">Android</option>
<option value="J2ME.html">J2ME</option>
<option value="Windows.html">Windows</option>
</select>
</form>
</div>
<div id="loadContainer" style="float:right"></div>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function loadFrame()
{
var select_value=document.getElementById("platform").value;
window.location =select_value;
}
</script>
</head>
<body>
<form>
Platform:
<select id='platform' onchange="loadFrame()">
<option value="andriod.html">Android</option>
<option value="j2me.html">J2ME</option>
<option value="windows.html">Windows</option>
</select>
</form>
</body>
</html>
You can add an empty frame in your page and directly change its src, there's no need to retrieve html content, like below:
<html>
<head>
<script type="text/javascript">
function loadFrame(comboBox)
{
var frame = window.frames['platformFrame'],
src = comboBox.options[comboBox.selectedIndex].value;
frame.window.location.href = src; //use window.location to avoid browser capability.
}
</script>
</head>
<body>
<form>
Platform:
<select id='platform' onchange="loadFrame()">
<option value="andriod.html">Android</option>
<option value="j2me.html">J2ME</option>
<option value="windows.html">Windows</option>
</select>
</form>
<iframe src="" id="platformFrame"></iframe>
</body>
</html>
You can try such a variant:
First, set values for your options like this and set the onchange event for select element:
<form>
Platform:
<select name='platform' onchange='loadFrame(this)' id='OSList'>
<option value="1.html">Android</option>
<option value="2.html">J2ME</option>
<option value="3.html">Windows</option>
</select>
</form>
<div id="loadContainer"></div>
Second, create a function, that creates an iFrame with the src got from selected option value and appends it somewhere (like to div#loadContainer):
function loadFrame(comboBox)
{
var frame = document.createElement("iframe");
frame.src = comboBox.options[comboBox.selectedIndex].value;
var container = document.getElementById("loadContainer");
container.innerHTML = "";
container.appendChild(frame);
}
Look at the example here
If you are able to use jQuery (or other frameworks you may bind to the select onchange event in such a way via JS):
var el = $("#OSList");
el.change(function() {
var frame = document.createElement("iframe");
frame.src = el.val();
$("#loadContainer").empty().append(frame)
});
Example here
I want to know how can I get the value of the selected option whenever I change the value combobox. Here's my code:
<html>
<head>
<script type="text/javascript">
function dispOptionValue() {
var select = document.getElementById('footballPlayers');
alert(select.options.value);
}
</script>
</head>
<body>
<select id="footballPlayers" onchange="dispOptionValue">
<option value="1">Ricardo Kaka</option>
<option value="2">Cristiano Ronaldo</option>
<option value="3">Johan Crujjf</option>
<option value="4">Gerd Muller</option>
<option value="5">Franz Beckenbauer</option>
</select>
</body>
</html>
I know its wrong but I don't have any idea how to start. Please help.
You can modify your code as follow:
function dispOptionValue()
{
var select = document.getElementById('footballPlayers');
alert(select.options[select.selectedIndex].value);
}
And change onChange event in dispOptionValue()
try:
<script type="text/javascript">
$(document).ready(function() {
$('input[type=checkbox]').each(function () {
var select = $(this).val();
alert(select);
});
});
</script>
Do not forget to include js file.
I need to make javascript code to swap images with option change.
Here is the code:
<select name="Color:"onchange="document.getElementById('myimage').src = this.value;
">
<option value="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_byr.jpg">Black/Yelow/Red</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_nr.jpg">Navy/Red</option>
<option value="images/taylormade_purelite_standbag_nw.jpg">Red/Black/White</option>
<option value="images/taylormade_purelite_standbag_rb.jpg">Black/Red</option>
<option value="images/taylormade_purelite_standbag_wrb.jpg">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
My problem is this: I need to have option values in plain text such as "Black/Yelow/Red" not a URL because this option value will show up in the check out page. Can anybody help me?
Setting up a mapping from your color options to the URLs might work, I think.
<script>
var colorUrlMap = {
"Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
//Add more here
"White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
Use another attribute on the option:
<option value="Black/White" rel="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
Then get that attribute with getAttribute("rel")
<select name="Color:" onchange="document.getElementById('myimage').src = this.options[this.selectedIndex].getAttribute('rel');">
You could use CSS and just change the class based upon the selection. Then all of your URL's are in a stylesheet.
CSS:
.red
{
background: url(red.gif) no-repeat;
}
HTML/JS:
<select name="Color:" onchange="document.getElementById('myimageholder').setAttribute("class", "red");">
This works for me.
<HTML>
<head>
<TITLE>Image Select Test</TITLE>
<script type="text/javascript" language='javascript'>
function flip() {
myimage.src = ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url');
}
</script>
</head>
<body>
<form>
Select an image:<br/>
<select id="ColorSelect" onchange="javascript:flip();">
<option url="images/0.png" value='Zero'>Zero</option>
<option url="images/1.png" value='One'>One</option>
<option url="images/2.png" value='Two'>Two</option>
<option url="images/3.png" value='Three'>Three</option>
<option url="images/4.png" value='Four'>Four</option>
</select>
</form>
<img src="images/unknown.png" id="myimage"/>
</body>
<script type="text/javascript" language='javascript'>
// place this after <body> to run it after body has loaded.
var myimage = document.getElementById('myimage');
var ColorSelect= document.getElementById('ColorSelect');
</script>
</HTML>
ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url'); does not work.
It is rather ColorSelect.options[ColorSelect.selectedIndex].getAttribute('url');