【JavaScript】【jQuery】ドロップダウン選択時その項目のvalue値をhidden項目のvalue値に渡す。 #JavaScript

例）
下記ドロップダウンで
「東京」(value: "tokyo")を選択するとき、
hidden項目のvalueに　"tokyo"　を渡す。

index.html

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>

<input id="result" type="hidden" value="">

<select name="都道府県" id="pref">
    <option value="osaka">大阪</option>
    <option value="tokyo">東京</option>
</select>

<script>
    pref = jQuery("#pref")
    pref.on("change", function(){
        var result = $(this).val()

        $("#result").val(result)
        pref_result = document.getElementById("result")
        console.log(pref_result.value) //tokyo
    })
</script>