javascript - 使用 javascript 获取 dropdownlist 的所有值以查看加载的值是否已更改

Question

这是为了检查用户是否在未保存当前表单的条目或更新的情况下打开另一个 div(表单；该页面有四个)。

我需要将下拉列表的当前值与下拉列表的所有可能选择进行比较。如果存在差异，则会向用户显示一条警报，通知尚未保存数据。下拉菜单的数量没有固定值。我的脚本已经能够正确计算每个表单的下拉列表数量。

谢谢

詹姆斯

Answer 1

您可以通过在选择更改时更新变量来完成此操作，然后每当您执行要转到下一个表单的操作时检查该值。这是我模拟的代码:

HTML -

<select id="one">
    <option value=""></option>
    <option>1</option>
    <option>2</option>
</select>
<br />
<select id="two">
    <option value=""></option>
    <option>3</option>
    <option>4</option>
</select>
<br />
<select id="three">
    <option value=""></option>
    <option>5</option>
    <option>6</option>
</select>
<br />
<!-- The submit buttons -->
<input type="submit" id="submit" value="Save" />
<br />
<!-- The link that moves on to the next form -->
<a href="#" id="moveOn">Move on</a>

Javascript-

// the variable
var selectChanged = false;
// set up everything on load
window.onload = function() {

    // bind handlers to submit button, link, an dselects
    document.getElementById("submit").onclick = submitForm;
    document.getElementById("moveOn").onclick = moveOn;

    var selects = document.getElementsByTagName("select");
    var numSelects = selects.length;
    for (var i = 0; i < numSelects; i++) {
        selects[i].onchange = noteChanged;
    }
}

function submitForm() {
    // set the changed variable to false
    selectChanged = false;
}

function moveOn() {
    // if the select has changed without save, alert the user and prevent
    // link actions
    if (selectChanged) {
        alert("You have changed a form value but not saved it");
        return false;
    }
}

// update the value for each time a select changes
function noteChanged() {
    selectChanged = true;
}

Here it is行动中