将所选<select>选项分配给输入的值

Question

我有一个具有4个<option>s的<select>，我正在尝试将所选选项设置为<input type="hidden">的值。

这是我的代码：

<form id="selector" name="selector" action="" method="get">
                <label>Number of players: </label><select form="selector" id="selectelement">
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
                <input type="hidden" id="numofplayers" />
                <label> Board size: </label><input type="number" id="board_size" maxlength="2" style="max-width: 20px;" name="board_size" min="3" max="20" />
                <label> Sequence to win: </label><input type="number" id="win_size" maxlength="1" style="max-width: 10px;" name="win_size" min="3" max="9" />
                <input type="submit" name="submit" value="Go" />
            </form>

我试过这个：

function goform()
{
    this.form.elements["numofplayers"].value =  document.getElementById('selectelement').selectedIndex.innerHTML;
}

在标签的形式中，我这样做：

<form onsubmit="goform()" id="selector" name="selector" action="" method="get">

我该怎么做？

谢谢。

编辑：对不起，我解决了它，看起来你可以通过这样做来获得所选选项的值：

var x = document.getElementById("selectelement").value;

无论如何，谢谢。

Answer 1

发布前搜索。在任何情况下，请参阅：检索所选<选项>在<选择>元件

在您的情况下：

function getSelectedValue(elementId) {
    var elt = document.getElementById(elementId);
    if (elt.selectedIndex == -1)
        return null;
    return elt.options[elt.selectedIndex].value;
}
this.form.elements["numofplayers"].value = getSelectedValue('selectelement');

你应该可以从那里出发。

但顺便问一下，你为什么要这么做？您应该能够在服务器端收集selectelement变量的值，因为您正确地填充了值

Answer 2

每次选项列表更改时，使用onchange事件分配值：

document.getElementById("selectelement").onchange = function() {
    //For values (<option value='1'>1</option>)
    document.getElementById("numofplayers").value = this.value;
    //Actual option text:
    document.getElementById("numofplayers").value = this.options[this.selectedIndex].text;
}