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 に答える