javascript - 我可以在 <option> 标签中传递多个值吗？

Question

我有一个程序可以模拟具有正面图像和背面图像的传单的折叠效果。我通过 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 的正面图像，以及应该获取传单背面图像的函数:

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

Answer 1

可以这样做

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

检查此链接是否有类似问题

Can an Option in a Select tag carry multiple values?