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>

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 + ")";
            }
        }

• javascript
• html
• html-select

• Did you consider adding hidden input with necessary data? Or maybe some custom attributes, like data-back-image? – mic4ael Commented Jul 23, 2015 at 6:05
• Could you use data attributes instead? e.g. <option value="Flyer1" data-flyer-one="Flyer1Pag1.png" data-flyer-two="Flyer1pag2.png">Flyer 1</option> – jasonscript Commented Jul 23, 2015 at 6:06

5 Answers 5

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

Can an Option in a Select tag carry multiple values?

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>

You can feed it a series of values, separated by mas:

<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]); 
}

   <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];
     ?>