Question

假设我有一个包含用户可以选择的“select”元素的表单。当准备提交时，我需要找到所有已经改变的“选择”。我怎么能这样做？

例如：

<form>
    <input type="text" name="a"/>
    <select name="b">...</select>
    <select name="c">...</select>
    <select name="d">...</select>
</form>

Answer 1

使用jQuery，这样的东西应该有效：

$('select').change(function() {
    $(this).addClass('changed');
});

$('form').submit(function() {
    var changed_selects = $('select.changed');
    // do what you want with the changed selects
});

Answer 2

我会利用HTMLOptionElement上的defaultSelected属性，而不是试图跟踪已发生变化的select：

form.onsubmit = function() {
    var selects = form.getElementsByTagName("select")
        , i
        , changedSelects = []
        , selected
        , select;

    /* Iterate over all selects in the form: */
    for (i = 0; i < selects.length; i++) {
        select = selects[i];
        /* Get the currently selected <option> element: */
        selected = select[select.selectedIndex];

        /* Determine if the currently selected option is the one selected by default: */
        if (!selected.defaultSelected) {
            changedSelects.push(select);
        }
    }

    alert(changedSelects.length);
}

您可以遍历表单上的所有select元素，确定所选选项是否是默认选择的选项，并将选定选项不是默认选项的每个选项推送到数组中。

示例： http://jsfiddle.net/andrewwhitaker/abFr3/

Answer 3

您可以注册一个事件监听器（使用onchange等）来确定是否进行了任何更改。

或者，您可以保留所有先前值的私有副本，然后在提交之前运行比较以检查更改。

Answer 4

做类似的事情：

var selectedVal =  $("select[name='a'] option:selected").val();
//check this with your default selected val

Answer 5

您可以将onchange事件侦听器附加到每个<select>元素。触发事件时，您可以将实际元素存储在临时数组中，并在以后准备提交时引用它。请注意，该数组可以保存实际的DOM元素。

Answer 6

您需要澄清“选择已更改”的含义。

如果您的意思是更改了默认值，那么您应该在每个选择（通常是第一个）上设置一个选项作为默认选择选项。然后，您可以遍历选择并查看具有所选属性的选项（或defaultSelected属性为true的选项）是否为选定选项，例如

<script>
function anyChanged(){
    var select, selects = document.getElementsByTagName('select');

    for (var i=0, iLen=selects.length; i<iLen; i++) {
      select = selects[i];

      if (!select.options[select.selectedIndex].defaultSelected) {
        // the selected option isn't the default
        alert('select ' + (select.id || select.name) + ' changed');
      }
    }
 }
</script>

<select name="one">
  <option selected>one
  <option>two
  <option>three
</select>

<button onclick="anyChanged()">Check</button>

但是，如果您想查看用户是否根据其他逻辑更改了所选选项，则需要说出它是什么。

如何找到所有已更改的选择元素？

6 个答案: