3

我有一个下拉 html 列表。如果我从下拉列表中选择一个选项，我必须将下拉值分配给 javascript 变量并将其显示在 html 上

这是我的代码

HTML：

<form method="post">
    <select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>

    <input type="hidden" name="hiddenInput" id="hiddenInput" value="" />

    <button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>

Javascript：

function changeHiddenInput (objDropDown)
{
    var objHidden = document.getElementById("hiddenInput");
    objHidden.value = objDropDown.value; 
    var a = objHidden.value;
     result.innerHTML = a || "";
}

但是每当我提交值时，它都会出错。这里有什么问题吗？

演示

4

1 回答 1

3

在您的演示中，您在 jsfiddle 中选择了默认的 onLoad 选项。这会导致站点将您的整个代码包装在一个回调函数中，这意味着您的 showit 函数不是 DOM0 内联事件处理程序所要求的全局函数。

将此选项更改为 no wrap(head) ，它将起作用。

假设您拥有<script>javascript 的标签，您拥有的代码将在页面上运行良好。

在这里提琴

关于您的<button onclick="changeHiddenInput (objDropDown)">Try it</button>,objDropDown未定义...并添加，type="button"否则默认为提交按钮。

我为演示做了一些更改，所以我的代码是：

html

<form method="post">
    <select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>

    <input type="hidden" name="hiddenInput" id="hiddenInput" value="" />

    <button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>

<div id="result"> </div>

javascript

var select;
window.onload = function () {
    select = document.getElementById('dropdown');
    console.log(select);
}

function changeHiddenInput(objDropDown) {
    console.log(objDropDown);
    var objHidden = document.getElementById("hiddenInput");
    objHidden.value = objDropDown.value;
    var a = objHidden.value;
    result.innerHTML = a || "";
}
于 2013-07-29T18:54:13.040 回答