Question

I’m building a registration form where I have a drop down list for security questions. The user will have a choice of various questions, however, I have an item in the list that says “[Type in your own question]”.

I have a css hidden text box that I want to make appear when the user selects “[Type in your own question]”.

Here is the code in my Register.cshtml razor form:

<div class="editor-field">
                    @{
            List<SelectListItem> items = new List<SelectListItem>();
            items.Add(new SelectListItem { Text = "What was the name of your first pet?", Value = "SQ1" });
            items.Add(new SelectListItem { Text = "What is your mother's maiden name?", Value = "SQ2" });
            items.Add(new SelectListItem { Text = "What was the first foreign country you visited?", Value = "SQ3" });
            items.Add(new SelectListItem { Text = "What is your favorite sports team?", Value = "SQ4" });
            items.Add(new SelectListItem { Text = "Who is your favorite athlete?", Value = "SQ5" });
            items.Add(new SelectListItem { Text = "[Type in your own question]", Value = "SQ6" });
                    }
                    @Html.DropDownListFor(model => model.SecurityQuestion1, items, new { @Id = "ddlSq1" })
                    @Html.ValidationMessageFor(model => model.AnswerSecurityQuestion1)
                </div>
                <div id="customSecurity" style="visibility:hidden">
                    <div class="editor-label">
                        @Html.LabelFor(model => model.CustomSecurityQuestion1)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.CustomSecurityQuestion1, new { @Id="txtCustomSq1"})
                        @Html.ValidationMessageFor(model => model.CustomSecurityQuestion1)
                    </div>

Here is my jquery/javascript:

        <script type="text/javascript">
        $("#ddlSq1").change(function () {
            if ($(this).attr('selectedIndex') == 5)
                $("#customSecurity").css("visibility", "visible");
        });
    </script>    

The .change event is not firing at all. I don’t know what it could be. I tried taking the @ symbol out of my ID nameing in the html helper and various other things but still no luck. Does anybody here see a problem with my code?

Much appreciated!

Answer 1

First of all you need to run your code when the DOM is ready, to do this, wrap your code in a ready handler: $(function() { ... }. Secondly, it’s better to check the value of the select rather than the selectedIndex, in case the order of the options changes in the future.

<script type="text/javascript">
    $(function() {
        $("#ddlSq1").change(function () {
            if ($(this).val() == "SQ6")
                $("#customSecurity").css("visibility", "visible");
        });
    });
</script>