将选定的 <select> 选项分配给输入的值 [关闭]答案

【问题标题】：Assign a selected <select> option to an input's value [closed]将选定的 <select> 选项分配给输入的值 [关闭]
【发布时间】：2013-07-13 21:14:39
【问题描述】：

我有一个 <select> 和 4 个 <option>s，我正在尝试将所选选项转换为 <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;

还是谢谢。

【问题讨论】：

正如您在MDN documentation 中看到的，selectedIndex 返回一个数字，而不是 HTML 元素。因此你不能使用.innerHTML。
我如何从索引中获得期权的价值？
在这种情况下您可以只使用.value。如果option 元素没有value 属性，则将其内部文本用作值。

标签： javascript dom

【解决方案1】：

发帖前先搜索。无论如何请参阅：Retrieving the text of the selected <option> in <select> element

在你的情况下：

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 变量的值，因为您正确填充了该值

【讨论】：

OP 没有提到 jQuery。 “除非还包含框架/库的标签，否则需要纯 JavaScript 答案。”
@FelixKling 谢谢你说得对！正在编辑它

【解决方案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;
}

【讨论】：