Question

我有一个drop 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 || "";
}

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

DEMO

Answer 1

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

将此选项更改为无包装（头部），它将起作用。

假设您拥有javascript的<script>标记，那么您拥有的代码将在页面上正常运行。

Fiddle here

关于您的<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 || "";
}

分配一个javascript变量值取决于html下拉列表部分

1 个答案: