Declaring the selected dropDownList text into a hiddenfield, so it can be used with JS

Question

I need to declare the 'text string' of the dropdownlist 'dropCallbackReason' into the 'ValueHiddenField' ID of the <Asp:HiddenField> so that I can then use it as a javascript variable.

The issue is that another dropdown list above has a AutoPostBack which clears the javascript variables, so I know it needs to declared with a page-load I think through the backend. I know I'm close, but does anybody have any ideas?

<asp:DropDownList AutoPostBack="true" OnSelectedIndexChanged="dropVehicleRequest_Changed" runat="server" ID="dropVehicleRequest"></asp:DropDownList>

<asp:DropDownList runat="server" ID="dropCallbackReason" SelectedIndexChanged="riskSeverityDropDown_SelectedIndexChanged" onChange="javascript:updateCallBackReason()" ClientIDMode="Static" >
 <asp:ListItem Text="-- Select Reason --" Value="1"></asp:ListItem>
 <asp:ListItem Text="Booking" Value="2"></asp:ListItem>
 <asp:ListItem Text="Discussing" Value="3"></asp:ListItem>
 <asp:ListItem Text="Contact" Value="4"></asp:ListItem>
</asp:DropDownList>
<asp:hiddenfield id="ValueHiddenField" value="test" runat="server"/>

<script type="text/javascript">
        function updateCallBackReason() {
        callBackReason = document.getElementById('<%=ValueHiddenField.ClientID %>').value;
        return callBackReason;
        }
</script>

Answer 1

It's expected that the JS variables will be reset by a post back, as you are sending the client a new version of the page to render. Since ASP.NET does a good job of tracking the control state, can you just alter your JS to get the current selected value of the DDL rather than sending through the server? E.g. something like

<asp:DropDownList AutoPostBack="true" OnSelectedIndexChanged="dropVehicleRequest_Changed" runat="server" ID="dropVehicleRequest"></asp:DropDownList>

<asp:DropDownList runat="server" ID="dropCallbackReason" SelectedIndexChanged="riskSeverityDropDown_SelectedIndexChanged" onChange="javascript:updateCallBackReason()" ClientIDMode="Static" >
 <asp:ListItem Text="-- Select Reason --" Value="1"></asp:ListItem>
 <asp:ListItem Text="Booking" Value="2"></asp:ListItem>
 <asp:ListItem Text="Discussing" Value="3"></asp:ListItem>
 <asp:ListItem Text="Contact" Value="4"></asp:ListItem>
</asp:DropDownList>

<script type="text/javascript">
        function updateCallBackReason() {
            var ddlReason = document.getElementById("<%=dropCallbackReason.ClientID%>");
            callBackReason = ddlReport.options[ddlReason.selectedIndex].text;
            return callBackReason;
        }
</script>