如何根据选项值更改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>