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;
}
Related
I am trying to create a connection betwen a and that if I selected some VALUE the href of the will change, is it possible in JavaScript?
<html>
<head></head>
<body><select id="worldsize">
<option value="small_world" selected="">Small</option>
<option value="normal_world">Normal</option>
<option value="huge_world">Huge</option>
<option value="infinte_world" disabled="">Infinite</option>
</select>
<a name="a "class="for_a_button CreateANewWorldButton Checkout" href="?START_S" id="button_click">Create an new World</a>
</body>
</html>
<html>
<head></head>
<body><select id="worldsize" onchange="change(this.value)">
<option value="small_world" selected="">Small</option>
<option value="normal_world">Normal</option>
<option value="huge_world">Huge</option>
<option value="infinte_world" disabled="">Infinite</option>
</select>
<a name="a "class="for_a_button CreateANewWorldButton Checkout" href="?START_S" id="button_click">Create an new World</a>
<script>
function change(val){
document.getElementById("button_click").href= val;
}
</script>
</body>
</html>
I'm trying to load page content into a div via Ajax when a select option is selected.
This is my code, but it will not work.
$('mySelect').on('change',function(){
function loadPage(url){
$("#page").load(url);
}
});
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" onchange="loadPage('One.html')">One</option>
<option value="2" onchange="loadPage('Two.html')">Two</option>
</select>
</div>
<div id="page"></div>
</body>
</html>
I have a select box with 2 options the values are One.html and Two.html and under that I have a div and want the content from One.html and Two.html to load in the div when the select box changes... Via Ajax any suggestions?
Thanks
You're missing the id sign # :
$('mySelect').on('change',function(){
Should be :
$('#mySelect').on('change',function(){
___^
Try to avoid the inline event onchange() and use data-* to store the url param then pass it to the loadPage function inside the change event.
$(function() {
loadPage("One.html");
$('#mySelect').on('change', function() {
loadPage($(this).find(':selected').data('url'));
//OR
// $("#page").load( $(this).find(':selected').data('url') );
});
});
function loadPage(url) {
$("#page").load(url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" data-url="One.html">One</option>
<option value="2" data-url="Two.html">Two</option>
</select>
</div>
<div id="page"></div>
it's quite simple:
$("#SelectOne").change(function() {
$("#someDiv").load($(this).val());
});
<select id="SelectOne">
<option>One.html</option>
<option>Two.html</option>
</select>
<div id="someDiv"></div>
<!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 am new to AJAX and PHP, and I have this code:
<head>
<script type="text/javascript">
function crimeselect(){
var select = document.getElementById("crime").value;
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
What I want is, when I choose "Crimes VS Person", the select option with an id of "CVPerson" would only be the one to appear and the select option with an id of "CVHO" would not be appeared. Same also if i choose "Crimes VS Moral and Orders".
I don't know how to do it. Any tips please.
<head>
<script type="text/javascript">
function crimeselect(){
document.getElementById(document.getElementById("crime").value).style.visibility = 'visible';
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="" style="visibility:hidden;">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="" style="visibility:hidden;">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
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');