Question

我在下面的代码中包含一个下拉列表和两个带有ID的文本框＆＃34; OtherName＆＃34;和＆＃34; OtherDesc＆＃34;。我想删除/删除两个文本框，除了＆＃34;其他＆＃34;从下拉列表中选择。这是我的代码，但它不知道为什么？

<div class="form-group">
            @Html.LabelFor(model => model.CategoryId, "Category", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("CategoryId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
            </div>
        </div>


            <div id="OtherName" class="form-group" >
                @Html.LabelFor(model => model.tbl_Category.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.tbl_Category.CategoryName, new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>

        <div id="OtherDesc" class="form-group">
            @Html.LabelFor(model => model.tbl_Category.CategoryDesc, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.tbl_Category.CategoryDesc, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

JQUERY

$(document).ready(function () {
        //this line fires no matter what
        $("#OtherName").hide();
        $("#OtherDesc").hide();

        $("#CategoryId").change(function () {
            var value = document.getElementById("CategoryId").value;
            if (value == "1011") {
                $("#OtherName").show();
                $("#OtherDesc").show();
            }
            else {
                $("#OtherName").remove();
                $("#OtherDesc").remove();
            }
        });
    })

Answer 1

如何更改代码的一些建议：

您可以组合元素选择器。
使用hide代替remove。否则你的元素将永远消失。
你已经使用了jQuery，所以你也没有得到jQuery的价值吗？
因为您只需要一次值，所以不需要变量声明value。
$(function() {});有一个简写$(document).ready(function() {});。

代码：

$(function() {
    var boxes = $("#OtherName, #OtherDesc").hide();

    $("#CategoryId").change(function() {
        if( $(this).val() == "1011" )
            boxes.show();
        else
            boxes.hide();
    });
});

更短，您可以使用toggle代替show和hide：

$(function() {
    var boxes = $("#OtherName, #OtherDesc").hide();

    $("#CategoryId").change(function() {
        boxes.toggle($(this).val() == "1011");
    });
});

Answer 2

.remove()完全从dom中删除元素。您需要使用.hide()而不是删除元素。

您也可以通过多种方式优化代码。像

1）使用点击的选择上下文，而不是再次通过id获取

2）使用多个选择器来定位两个元素，然后通过一次调用显示/隐藏它们。

$("#CategoryId").change(function () {
        var value = this.value;
        $("#OtherName,#OtherDesc").toggle(value == "1011");
});

根据保管箱选择删除/删除文本框

2 个答案: