做一个文本框出现时，从MVC下拉列表中选择一个值 [英] Make a textbox appear when a value is selected from a dropdown list in MVC

问题描述

在其他是从DDL选择我想要的是文本框中出现。然而，它始终显示，而不是被隐藏，直到调用。

我的看法是标记：

 ＆LT; D​​IV CLASS =表单组＆GT;
@ Html.LabelFor（型号=＆GT; model.SelectType，选择型，全新{@class =控制标签COL-MD-5}）
＆LT; D​​IV CLASS =COL-MD-1＆GT;
    @ Html.DropDownList（选择类型，空，新的{@id =其他}）
    @ Html.TextBoxFor（型号=＆GT; model.OtherSpecify，新{@id =OtherSpecify}）
    @ Html.ValidationMessageFor（型号=＆GT; model.SelectType）
＆LT; / DIV＆GT;
 

我尝试了以下两个javacript codeS没有任何成功

 ＆LT;脚本＆GT;
    document.addEventListener（DOMContentLoaded功能（）{
        $（选择类型）的触发器（变）;
    }）
    $（＃选择类型）。在（变，函数（）{
        如果（$（＃选择类型选项：选择）。VAL（）== 3）{
            $（＃OtherSpecify），隐藏（）。
        }其他{
            $（＃OtherSpecify）显示（）。
        }
    }）;
＆LT; / SCRIPT＆GT;＆LT;脚本＆GT;
    。document.addEventListener（DOMContentLoaded功能（）{$（选择类型）的触发器（变）;
    }）
    $（函数（）{
        $（'。OtherSpecify）显示（）;        $（其他）。改变（函数（）{
            如果（$（本）。是（：选择））{
                $（本）.parent（）和Next（）隐藏（）。
            }
            其他{
                $（本）.parent（）next（）的显示（）。
            }
        }）;
    }）
＆LT; / SCRIPT＆GT;
 

解决方案

我不得不调整一些东西，使Javascript才能正常工作。首先，我分开了我的HTML助手：

 ＆LT; D​​IV CLASS =表单组＆GT;
                    @ Html.LabelFor（型号=＆GT; model.SelectType，选择型，全新{@class =控制标签COL-MD-5}）
                    ＆LT; D​​IV CLASS =COL-MD-1＆GT;
                        @ Html.DropDownList（选择类型的String.Empty）
                        @ Html.ValidationMessageFor（型号=＆GT; model.SelectType）
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;                ＆LT; D​​IV CLASS =表单组ID =OtherSpecifyFormGroup＆GT;
                    @ Html.LabelFor（型号=＆GT; model.OtherSpecify，新{@class =控制标签COL-MD-4}）
                    ＆LT; D​​IV CLASS =COL-MD-4 sbchanged＆GT;
                        @ Html.TextBoxFor（型号=＆GT; model.OtherSpecify）
                        @ Html.ValidationMessageFor（型号=＆GT; model.OtherSpecify）
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
 

然后写了下面的JavaScript code：

 ＆LT;脚本＆GT;
            $（文件）。就绪（函数（）{
                //这一行触发无论是什么
                $（＃OtherSpecifyFormGroup），隐藏（）。
                $（＃选择类型）。改变（函数（）{
                    VAR值=的document.getElementById（选择类型）值。
                    如果（价值==4）{
                        $（＃OtherSpecifyFormGroup）显示（高亮，{颜色：＃7FAAFF}，1000）。
                    }
                    其他{
                        $（＃OtherSpecifyFormGroup），隐藏（）。
                    }
                }）;
            }）
        ＆LT; / SCRIPT＆GT;
 

我给我的表格组其他指定一个ID，这样我可以躲在最初的文本框。随后声明的变量价值在我的数据库中填充DDL值有选择类型的ID，因此它不会叫其他，因为它是不承认，但如图所示，当值4被称为它的作品！的else确保如果选择了其他的DDL值，则该文本框被再次隐藏。

When "Other" is selected from the DDL all I want is for the textbox to appear. However it always displays instead of being hidden until called.

My view markup is:

<div class="form-group">
@Html.LabelFor(model => model.SelectType, "Select Type", new { @class = "control-label col-md-5" })
<div class="col-md-1">
    @Html.DropDownList("SelectType", null, new { @id = "Other" })
    @Html.TextBoxFor(model => model.OtherSpecify, new { @id = "OtherSpecify" })
    @Html.ValidationMessageFor(model => model.SelectType)
</div>

I tried the following two javacript codes without any success

<script>
    document.addEventListener("DOMContentLoaded", function () {
        $("SelectType").trigger("change");
    })
    $("#SelectType").on("change", function () {
        if ($("#SelectType option:selected").val() == 3) {
            $("#OtherSpecify").hide();
        } else {
            $("#OtherSpecify").show();
        }
    });
</script>   

<script>
    document.addEventListener("DOMContentLoaded", function () { $("SelectType").trigger("change");
    })
    $(function () {
        $('.OtherSpecify').show();

        $("Other").change(function () {
            if ($(this).is(":selected")) {
                $(this).parent().next().hide();
            }
            else {
                $(this).parent().next().show();
            }
        });
    })
</script>

解决方案

I have to adjust a few things to enable the Javascript to work. Firstly I seperated out my HTML helpers:

<div class="form-group">
                    @Html.LabelFor(model => model.SelectType, "Select Type", new { @class = "control-label col-md-5" })
                    <div class="col-md-1">
                        @Html.DropDownList("SelectType", String.Empty)
                        @Html.ValidationMessageFor(model => model.SelectType)
                    </div>
                </div>

                <div class="form-group" id="OtherSpecifyFormGroup">
                    @Html.LabelFor(model => model.OtherSpecify, new { @class = "control-label col-md-4" })
                    <div class="col-md-4 sbchanged">
                        @Html.TextBoxFor(model => model.OtherSpecify)
                        @Html.ValidationMessageFor(model => model.OtherSpecify)
                    </div>
                </div>

Then wrote the following JavaScript code:

<script>
            $(document).ready(function () {
                //this line fires no matter what
                $("#OtherSpecifyFormGroup").hide();
                $("#SelectType").change(function () {
                    var value = document.getElementById("SelectType").value;
                    if (value == "4") {
                        $("#OtherSpecifyFormGroup").show("highlight", { color: "#7FAAFF" }, 1000);
                    }
                    else {
                        $("#OtherSpecifyFormGroup").hide();
                    }
                });
            })
        </script>

I gave my form group for Other Specify an ID so that I could initially hid the textbox. Then declared the variable "value" as in my database the values that populate the DDL have SelectType Ids, therefore it wouldn't call "Other" as it wasn't recognised but as shown when the value "4" is called it works! The else ensures that if any other DDL value is selected then the textbox is hidden again.

这篇关于做一个文本框出现时，从MVC下拉列表中选择一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！