如何找到所有已更改的選擇元素？

比方說，我有一個表單，其中包含幾個用戶可以選擇的「select」元素。當準備提交時，我需要找到所有已更改的「選擇」。我該怎麼辦？如何找到所有已更改的選擇元素？

例如：

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

來源

2011-12-12 eric f.

你可以註冊一個事件偵聽器（使用onchange等），以確定是否進行了更改。

或者，您可以保留所有先前值的私人副本，然後在提交之前運行比較以檢查更改。

來源

2011-12-12 04:11:49 ziesemer

做這樣的事情：

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

來源

2011-12-12 04:12:19

您可以將onchange事件偵聽器附加到每個<select>元素。觸發事件時，可以將實際元素存儲在臨時數組中，並在您準備提交時稍後參考它。請注意，該數組可以容納實際的DOM元素。

來源

2011-12-12 04:13:58 Hristo

使用jQuery，這樣的事情應該工作：

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

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

來源

2011-12-12 04:23:57

絕對比我提出的更好的解決方案，但我建議在純粹的JavaScript解決方案中添加b/c OP沒有提到jQuery。 – Hristo

如果'select'的值改回原來標記爲'selected'的值？ –

該問題沒有提供上下文。它可能相關，也可能不相關，這段代碼假定它不是。 –

我將採取HTMLOptionElement優勢defaultSelected財產，而不是試圖跟蹤select S作改變：

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元素，確定選定選項是否是默認選擇的選項，並將其選定選項不是默認選項的每個選項推送到n陣列。

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

來源

2011-12-12 04:26:49

如果元素具有selected屬性或者已經以編程方式設置了屬性，則選項將只將defaultSelected屬性設置爲true。 – RobG

@RobG：是的，這是一個很好的觀點。我只是假設「選擇改變」意味着默認選擇了一個選項，但我不認爲情況總是如此。 –

你需要澄清你所說的「選擇已經改變了」的意思。

如果你的意思是從默認值改變了，那麼你應該在每次選擇（通常是第一次）設置一個選項作爲默認選擇的選項。然後，您可以迭代選擇內容，並查看選定屬性（或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>

但是，如果你想查看用戶是否已經改變了基於一些其他的邏輯所選擇的選項，你需要說的是什麼。

來源

2011-12-12 05:08:59 RobG

如何找到所有已更改的選擇元素？

回答

相關問題