javascript - 下拉菜单项反转

Question

我是 javascript 新手，我的代码如下所示

在 HTML 中：

<select name="dropdown" onChange="javascript: alertUser()" >
<option value="0" selected>Eat</option>
<option value="1">Work</option>
<option value="2">Sleep</option>
<option value="3" >Enjoy</option>

在 JavaScript 中：

function alertUser()
{
    confirm("Are you sure?");
}

---

现在，这是我的问题。

当我从下拉列表中选择一个元素时，它会弹出确认对话框“你确定吗？”。如果单击“确定”，则选择应更改为选定值。如果我取消，所选值应重置为下拉列表中先前选择的值。

谁能帮我解决这个问题。

谢谢

Answer 1

你可以使用这个：

window.onload = function () {
    var select = document.getElementsByName('dropdown')[0];
    var lastselected = select.value;
    select.onchange = function () {
        var newselected = select.value;
        if (confirm("Are you sure?")) {
            lastselected = newselected
            return true;
        }
        select.value = lastselected;
    }
};

我在其中添加了 onload ，因此它会在页面加载时运行。我删除了你的内联 js，更干净。所以你的 html 将是：

<select name="dropdown">
    <option value="0" selected>Eat</option>
    <option value="1">Work</option>
    <option value="2">Sleep</option>
    <option value="3">Enjoy</option>
</select>

在这里演示

Answer 2

这是使用“selectedIndex”方法的替代方法。

http://jsfiddle.net/thetenfold/UjYg2/

---

html

<select name="dropdown">
    <option value="0" selected>Eat</option>
    <option value="1">Work</option>
    <option value="2">Sleep</option>
    <option value="3">Enjoy</option>
</select>

---

JavaScript

function addEvent(elem, type, func) {
    if (elem.addEventListener) {
        elem.addEventListener(type, func, false);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, func);
    }
}

addEvent(window, 'load', function () {

    var select = document.getElementsByName('dropdown')[0],
        last = select.selectedIndex;
    addEvent(select, 'change', function () {
        if( confirm('Are you sure?') ) {
            last = select.selectedIndex;
        } else {
            select.selectedIndex = last;
        }
    });

});