javascript 我可以在 <option> 标签中传递多个值吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31579187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I pass multiple values in the <option> tag?
提问by Pikachuu
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:
这是我的 dropDownList 的 HTML：
<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:
这是 JavaScript 中的函数，用于更改有关 dropDownList 选择的正面图像以及应获取传单背面图像的函数：
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 + ")";
}
}采纳答案by Torben H.
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>回答by Vara
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
检查此链接以获取类似问题
回答by Amit
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>
回答by udai veer
<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];
?>
