select - 非表示の入力に値を選択

Question

これについてはすでに多くのトピックがあることを知っており、それらすべてを読んだと思いますが、まだ機能させることができません。

選択した値を非表示の入力フィールドに更新する必要があります。

たとえば、このコードを試してみると、うまくいきません。ソースコードを確認すると、値はまだ空です..

私は何を間違っていますか？

 <form>
    <select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
        <option value="j.hotmail.com">Jens</option>
        <option value="a.hotmail.com">Adam</option>
        <option value="d.homtail.com">Dan</option>
    </select>
    <input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
 </form>

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

Answer 1

これが必要だと思います：-

function changeHiddenInput (objDropDown)
{
   document.getElementById("hiddenInput").value = objDropDown.value; 
}

デモをチェック

Answer 2

子入力にアクセスするために、親フォームを使用する必要がある場合があることがわかりました。理由はわかりません。この場合、フォームに id を与えます。

<form id="hotmail"> 
    <!-- Form stuff -->
</form>

非表示の入力は 1 つしかないため、次のように jQuery を使用してアクセスできます。

var selectedValue = $("#dropdown option:selected").val();
$("#hotmail input[type=hidden]").val(selectedValue);

Answer 3

jQuery を使用すると、はるかに簡単になります。

var objHidden = $('#hiddenInput').val(objDropDown);