I have a program that simulates a folding effect on a flyer that has a front image and a back image. I select the flyers through a dropDownList. How can I pass the back image in the tag so that, when I rotate the image, the picture on the back is shown?
This is the HTML for my dropDownList:
<form name="Pictures"> <select name="dropPic" onchange="selectFront(this.value)"> <option value="Flyer1pag1.png" value="Flyer1pag2.png">Flyer 1</option> <option value="Flyer2pag1.png" value="Flyer1pag2.png">Flyer 2</option> <option value="Flyer3pag1.png" value="Flyer1pag2.png">Flyer 3</option> </select> </form>
Here is the function in JavaScript that changes the front image regarding the selection of the dropDownList and the function that should take the back image of the flyer:
function selectFront(imgSrc) { loadImage(imgSrc); var Dim_Slice = document.querySelectorAll(".slice"); for (var i = 0; i < Dim_Slice.length; i++) { Dim_Slice[i].style.backgroundImage = "url(" + imgSrc + ")"; } } function selectBack(imgSrc) { var Dim_Sliceb = document.querySelectorAll(".sliceb"); for (var i = 0; i < Dim_Sliceb.length; i++) { Dim_Sliceb[i].style.backgroundImage = "url(" + imgSrc + ")"; } }
it can be done in this way
<select id="dropPic">
<option data-picone="Flyer1pag1.png" data-pictwo="Flyer1pag2.png">Flyer 1</option>
<option data-picone="Flyer2pag1.png" data-pictwo="Flyer1pag2.png">Flyer 2</option>
<option data-picone="Flyer3pag1.png" data-pictwo="Flyer1pag2.png">Flyer 3</option>
</select>
And on change event you can get the value as below
$("#dropPic").change(function () {
alert($(this).find(':selected').data('picone'));
});
Check this link for similar question
Your question and / or what you're trying to do isn't entirely clear, but I think this is what you want:
<form name="Pictures">
<select name="dropPic"
onchange="selectFront(this.value.split(',')[0]);selectBack(this.value.split(',')[1]);">
<option value="Flyer1pag1.png,Flyer1pag2.png">Flyer 1</option>
<option value="Flyer2pag1.png,Flyer1pag2.png">Flyer 2</option>
<option value="Flyer3pag1.png,Flyer1pag2.png">Flyer 3</option>
</select>
</form>
You cannot have Multiple values in an Option Tag.
If the Name of the Front and Back-Image only differ by the Page-number, you can use this code:
function selectFlyer(name){ selectFront(name+"pag1.png"); selectBack(name+"pag2.png"); } function selectFront(imgSrc) { loadImage(imgSrc); var Dim_Slice = document.querySelectorAll(".slice"); for (var i = 0; i < Dim_Slice.length; i++) { Dim_Slice[i].style.backgroundImage = "url(" + imgSrc + ")"; } } function selectBack(imgSrc) { loadImage(imgSrc); var Dim_Sliceb = document.querySelectorAll(".sliceb"); for (var i = 0; i < Dim_Sliceb.length; i++) { Dim_Sliceb[i].style.backgroundImage = "url(" + imgSrc + ")"; } }
<form name="Pictures"> <select name="dropPic" onchange="selectFlyer(this.value)"> <option value="Flyer1">Flyer 1</option> <option value="Flyer2">Flyer 2</option> <option value="Flyer3">Flyer 3</option> </select> </form>
<form method="post">
<select class='form-control' name= 'dropPic'>
<option value="Flyer1pag1.png,Flyer1pag2.png">Flyer 1</option>
<option value="Flyer2pag1.png,Flyer1pag2.png">Flyer 2</option>
<option value="Flyer3pag1.png,Flyer1pag2.png">Flyer 3</option>
</select>
</form>
<?php
$dropPic=$_POST['dropPic'];
$result=explode(',', $dropPic);
$dropPic1=$result[0];
$dropPic2=$result[1];
?>
You can feed it a series of values, separated by commas:
<select id="BLAH" onchange="readBlah()">
<option value="1,car,red">1</option>
<option value="2,car,red">2</option>
<option value="3,truck,blue">3</option>
</select>
function readBlah() {
var e = document.getElementById("BLAH");
feedArray=e.value.split(",");
console.log(feedArray[0]);
console.log(feedArray[1]);
console.log(feedArray[2]);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.