2

セキュリティ保護用の質問のドロップダウンリストがある登録フォームを作成しています。ユーザーはさまざまな質問を選択できますが、リストに「[自分の質問を入力してください]」という項目があります。

ユーザーが「[自分の質問を入力]」を選択したときに表示したいcssの非表示のテキストボックスがあります。

これが私のRegister.cshtmlかみそり形式のコードです：

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

これが私のjquery/javascriptです：

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

.changeイベントはまったく発生していません。それが何であるかわかりません。htmlヘルパーなどのID名から@記号を取り除いてみましたが、うまくいきませんでした。ここの誰かが私のコードに問題を見つけましたか？

とても有難い！

4

2 に答える 2

3

まず、DOMの準備ができたらコードを実行する必要があります。これを行うには、コードを準備完了ハンドラーでラップします$(function() { ... }。次に、オプションの順序が将来変更される場合に備えて、valueではなく選択のをチェックすることをお勧めします。selectedIndex

<script type="text/javascript">
    $(function() {
        $("#ddlSq1").change(function () {
            if ($(this).val() == "SQ6")
                $("#customSecurity").css("visibility", "visible");
        });
    });
</script>
于 2012-05-17T12:56:43.943 に答える
0

このコードを$（document）.ready（）に移動します

<script type="text/javascript">      
$(document).ready(function(){   
$("#ddlSq1").change(function () {             
if ($(this).attr('selectedIndex') == 5)                
$("#customSecurity").css("visibility", "visible");         
});     
});
</script>
于 2012-05-17T12:57:28.893 に答える