如何根據選項值更改HTML選擇名稱

Question

我怎樣才能獲得期權價值。 我想根據選定的選項值更改name="<value>" 。 這樣我就可以將名稱值與onChange=""一起發送給spring控制器。

我想根據選項選擇值更改select name="report/leavereport/weeklysummery" 。

 <select  name="" onChange="document.getReportAll.submit()">
        <option  value="">Select Report Type</option>
        <option  value="report">TIME REPORT</option>
        <option  value="leavereport">LEAVE REPORT</option>
        <option  value="weeklysummery">TIME SUMMARY</option>
 </select>

謝謝，

Answer 1

鑒於代碼和現代瀏覽器，最短的變化是：

onChange="this.name = this.value; document.getReportAll.submit()"

......因為屬性事件處理程序中， this指的是選擇元素和現代的瀏覽器反映期權價值為value單選擇。

Answer 2

將id設置為select 。

<select id="select"...>...</select>

---

然后設置select元素的onchange事件。 選擇一個選項時會觸發它。

如果選擇器value未定義，則瀏覽器不支持它，因此可以使所選元素迭代選項並檢查是否包含selected屬性。 我不使用querySelector因為較舊的瀏覽器可能不支持它。

var selector = document.getElementById('select');

selector.onchange = function() {

    var value = this.value;

    if(!value) {

        for(var i = 0, op; op = selector.children[i]; i ++) {
            // Check if the attribute selected is valid
            if(op.getAttribute('selected')) {
                value = op.value;
                break;
            }
        }

    }

    this.name = value;

};

Answer 3

這是一個使用getAttribute和setAttribute可能（不顯眼）解決方案。

該腳本監聽任何的點擊options ，然后更新的值name的屬性select的基礎上，價值value的屬性option 。

 var options = document.getElementsByTagName('option'); function changeName() { var value = this.getAttribute('value'); window.alert('name = "' + value + '"'); this.parentNode.setAttribute('name',value); } for (var i = 0; i < options.length; i++) { options[i].addEventListener('click',changeName,false); } 

 <select name=""> <option value="">Select Report Type</option> <option value="report">TIME REPORT</option> <option value="leavereport">LEAVE REPORT</option> <option value="weeklysummary">TIME SUMMARY</option> </select>