我可以在 <option> 标签中传递多个值吗?
Can I pass multiple values in the <option> tag?
我有一个程序可以模拟具有正面图像和背面图像的传单的折叠效果。我 select 通过 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>
这是 JavaScript 中的函数,它改变了关于 dropDownList 的 selection 的正面图像和应该拍摄传单背面图像的函数:
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 + ")";
}
}
你的问题和/或你想做什么并不完全清楚,但我认为这就是你想要的:
<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>
选项标记中不能有多个值。
如果正反图的名称只是页码不同,您可以使用此代码:
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>
可以这样
<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>
并且在更改事件中,您可以获得如下值
$("#dropPic").change(function () {
alert($(this).find(':selected').data('picone'));
});
检查此 link 是否有类似问题
Can an Option in a Select tag carry multiple values?
<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];
?>
您可以为其提供一系列值,以逗号分隔:
<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]);
}
我有一个程序可以模拟具有正面图像和背面图像的传单的折叠效果。我 select 通过 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>
这是 JavaScript 中的函数,它改变了关于 dropDownList 的 selection 的正面图像和应该拍摄传单背面图像的函数:
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 + ")";
}
}
你的问题和/或你想做什么并不完全清楚,但我认为这就是你想要的:
<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>
选项标记中不能有多个值。
如果正反图的名称只是页码不同,您可以使用此代码:
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>
可以这样
<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>
并且在更改事件中,您可以获得如下值
$("#dropPic").change(function () {
alert($(this).find(':selected').data('picone'));
});
检查此 link 是否有类似问题
Can an Option in a Select tag carry multiple values?
<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];
?>
您可以为其提供一系列值,以逗号分隔:
<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]);
}