Jquery 基于下拉列表选择显示表单元素

我正在建立一个登记表，其中有一个安全问题的下拉列表。用户可以选择各种问题，但是，列表中有一项显示“[输入您自己的问题]”

我有一个css隐藏文本框，当用户选择“[输入您自己的问题]”时，我想让它出现

以下是my Register.cshtml razor表单中的代码：

<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>

@{
列表项=新列表（）；
items.Add（new SelectListItem{Text=“您的第一只宠物叫什么名字？”，Value=“SQ1”}）；
添加（new SelectListItem{Text=“你母亲的婚前姓是什么？”，Value=“SQ2”}）；
items.Add（新建SelectListItem{Text=“您访问的第一个外国是什么？”，Value=“SQ3”}）；
添加（新建SelectListItem{Text=“你最喜欢的运动队是什么？”，Value=“SQ4”}）；
添加（新建SelectListItem{Text=“你最喜欢的运动员是谁？”，Value=“SQ5”}）；
添加（新建SelectListItem{Text=“[Type in your own question]”，Value=“SQ6”}）；
}
@Html.DropDownListFor（model=>model.SecurityQuestion1，items，新的{@Id=“ddlSq1”}）
@Html.ValidationMessageFor（model=>model.AnswerSecurityQuestion1）
@LabelFor（model=>model.CustomSecurityQuestion1）
@Html.TextBoxFor（model=>model.CustomSecurityQuestion1，新的{@Id=“txtCustomSq1”}）
@Html.ValidationMessageFor（model=>model.CustomSecurityQuestion1）

以下是我的jquery/javascript：

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

$（“#ddlSq1”）。更改（函数（）{
if（$（this）.attr（'selectedIndex'）==5）
$（“#customSecurity”）.css（“可见性”、“可见”）；
});

.change事件根本没有触发。我不知道会是什么。我试着在html助手中去掉我的ID名称中的@符号和其他各种东西，但仍然没有成功。这里有人看到我的代码有问题吗

---

非常感谢

首先，您需要在DOM准备就绪时运行代码，为此，请将代码包装在就绪处理程序中：

$（function（）{…}

。其次，最好检查select的

值，而不是
selectedIndex
，以防将来选项的顺序发生变化

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


$（函数（）{
$（“#ddlSq1”）。更改（函数（）{
if（$（this.val（）=“SQ6”）
$（“#customSecurity”）.css（“可见性”、“可见”）；
});
});
将此代码移动到$（document）.ready（）中


$（文档）.ready（函数（）{
$（“#ddlSq1”）.change（函数（）{
if（$（this）.attr（'selectedIndex'）==5）
$（“#customSecurity”）.css（“可见性”、“可见”）；
});     
});
Wow Rory！谢谢！我希望我有更高的声誉，这样我就可以投票给你的答案。谢谢！我真的应该知道不要忘记这个文件。准备好了。你棒极了
<script type="text/javascript">      
$(document).ready(function(){   
$("#ddlSq1").change(function () {             
if ($(this).attr('selectedIndex') == 5)                
$("#customSecurity").css("visibility", "visible");         
});     
});
</script>