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

Question

这是为了检查用户是否打开了另一个div（窗体；该页面有四个），而没有保存当前窗体的条目或更新。

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

谢谢，

詹姆士

Answer 1

我要做的是：

1. 每当发生更改时（您可以将onTrack事件附加到需要跟踪的任何表单元素上），请在某处设置一个标志，以指示该表单（或任何其他形式）为“脏”。 （放置它的好地方是data- attribute ）
2. 保存表单后，保存过程可以将脏标志重新设置为clean
3. 无论使用哪种方法切换表单，都可以先检查是否设置了脏标志，如果设置了脏标志，则显示错误（或警告）并阻止显示下一个表单。

有了这3个部件，您应该能够轻松检测到脏的（未保存的）表格并采取适当的措施。

Answer 2

您可以通过在选择更改时更新变量，然后在每次执行下一步操作时检查该值的方式来执行此操作。 这是我模拟的代码：

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

它在起作用