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');
Related
When combined like this, it works
<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>thing</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
<script type="text/javascript">
var countrieslist = document.classic.countries
var citieslist = document.classic.cities
var cities = new Array()
cities[0] = ""
cities[1] = ["1.1|gvhj", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2] = ["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3] = ["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4] = ["4.1|4.1"]
function updatecities(selectedcitygroup) {
citieslist.options.length = 0
if (selectedcitygroup > 0) {
for (i = 0; i < cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length] = new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
</script>
But when separated into a .html and .js file, it doesn't. Why?
3lev.html:
<html>
<head>
<meta charset="utf-8"/>
<title>3lev</title>
<script src="3lev.js"></script>
</head>
<body>
<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>thing</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
</body>
</html>
3lev.js:
var countrieslist=document.classic.countries
var citieslist=document.classic.cities
var cities=new Array()
cities[0]=""
cities[1]=["1.1|1.1", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2]=["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3]=["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4]=["4.1|4.1"]
function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
The file is properly linked and the code is directly copied and pasted, so I can't see why wouldn't it work.
I don't know why it keeps making me add details, it's literally all I've got. I've given everything related that I could.
Add the defer attribute to the script tag
<script src="3lev.js" defer></script>
Or you can include the script tag just before the </body>closing tag intead of putting within head tag.
</form>
<script src="3lev.js"></script>
</body>
</html>
This will make the browser execute script only after DOM content has been loaded.
You need to use window.onload event of the javascript to make sure all the DOM content is loaded before javascript starts executing.
Below is the working code snippet:
window.onload=function(){
countrieslist=document.classic.countries
citieslist=document.classic.cities
};
var countrieslist,citieslist;
var cities=new Array() cities[0]=""
cities[1]=["1.1|1.1", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2]=["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3]=["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4]=["4.1|4.1"];
function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new
Option(cities[selectedcitygroup][i].split("|")[0],
cities[selectedcitygroup][i].split("|")[1])
}
}
}
This is my code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<select id="my_select" name="select_name" class="order_form_select">
<option data-img="" value="" disabled selected>Please select ↓</option>
<option data-img="1.jpeg" value="first">First</option>
<option data-img="2.jpeg" value="second">Second</option>
<option data-img="3.jpeg" value="third">Third</option>
</select>
<img id="order_form_image" src="">
<script>
document.getElementById("my_select").onchange = showFormatImage;
function showFormatImage() {
$("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
$('#img_src').html($("#order_form_image").attr('src'));
return false;
}
</script>
</body>
</html>
That shows an image depending on dropdown selection. That works very well so far. My goal is to also add a specific hyperlink to that image.
When the user selects "First" an images named 1.jpeg will get shown. This is like a thumbnail. When the user clicks on this image a new window/tab (target="_blank") shall open and show an image named e.g. 1_big.jpeg.
Does anybody know how to do that?
Hello this is a working example, hope it's help
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<select id="my_select" name="select_name" class="order_form_select">
<option data-img="" value="" disabled selected>Please select ↓</option>
<option data-img="1.jpeg" value="first">First</option>
<option data-img="2.jpeg" value="second">Second</option>
<option data-img="3.jpeg" value="third">Third</option>
</select>
<a id="link" target="_blank" href=""><img id="order_form_image" src=""></a>
<script>
document.getElementById("my_select").onchange = showFormatImage;
function showFormatImage() {
$("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
$('#img_src').html($("#order_form_image").attr('src'));
$('#link').attr('href','big_'+$('select[name=select_name] option:selected').attr('data-img'));
return false;
}
</script>
</body>
</html>
Give the anchor tag an id:
<img id="order_form_image" src="">
then you can jQuery in the href when the image changes:
function showFormatImage() {
$("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
$('#image_link').attr('href', $('select[name=select_name] option:selected').attr('data-img'));
$('#img_src').html($("#order_form_image").attr('src'));
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1 id="hey">List King</h1>
<div class="Select-DB">
<select id="DB" class="chosen-select" title="Select Database" data-placeholder="Select database you want!" style="width: 300px;">
<option value=""></option>
<option value="Pubchem3D"> Pubchem3D</option>
<option value="molport"> Molport</option>
<option value="ChemAxon"> ChemAxon</option>
<option value="ChemSpider"> ChemSpider</option>
</select>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script src="chosen_v1.6.2/chosen.jquery.js" type="text/javascript"></script>
<script src="ff.js" type="text/javascript"></script>
</body>
</html>
jquery chosen not working, what's wrong in my code?
My select tag just appear as default form....
p.s. Jquery code is located in another file ("ff.js")
$(document).ready(function(){
$(".chosen-select").chosen({no_results_text: "Sorry, We don't have such database ;-)"});
});
You need to change your javascript file like this
$('.chosen-select').change(function(){
var aaa = $("#DB").val(); // get option value
if(aaa === '') {
// user select empty item
console.log("Sorry, We don't have such database ;-)");
}
else{
// user select valid item
console.log(aaa);
}
});
How about using on change event?
$('.chosen-select').change(function(){
console.log(this.val());
});
I don't quite understand your question but try this
LINK
HTML
<h1 id="hey">List King</h1>
<div class="Select-DB">
<select id="DB" class="chosen-select" title="Select Database" data-placeholder="Select database you want!" style="width: 300px;">
<option value=""></option>
<option value="Pubchem3D"> Pubchem3D</option>
<option value="molport"> Molport</option>
<option value="ChemAxon"> ChemAxon</option>
<option value="ChemSpider"> ChemSpider</option>
</select>
</div>
JS
$('.chosen-select').change(function(){
var aaa = $("#DB").val();
if(aaa != ""){
console.log(aaa);
}
else{
console.log("Sorry, We don't have such database ;-)");
}
});
I want it so that when the DropDown List element is selected, I am able to grab it's value and set the input text, or even a DIV text, or even a label text to the value that was selected. Why doesn't it work? What am I missing?
jsfiddle: https://jsfiddle.net/fob6kp6k/
HTML:
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
<input id="hiddenControl" runat="server" />
JS/JQ:
$(document).ready(function(){
$('#bonus').change(function() {
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
});
});
whole thing:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#bonus').change(function() {
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
});
});
</script>
</head>
<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
<input id="hiddenControl" runat="server" />
</body>
</html>
Your code has an extra ) in the line where you are setting the value. You need to update from
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
to
document.getElementById("hiddenControl").value = $("#bonus option:selected").text();
However, as you are using jquery, you should update it further to following
$("#hiddenControl").val($("#bonus option:selected").text());
For reference - http://plnkr.co/edit/3paUZ4wT4GZwZFuCL7Bj?p=preview
You can also make the below changes to make it working
$('#bonus').change(function () {
var text = $("#bonus").find(":selected").text();
$("#hiddenControl").val(text);
});
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