显示隐藏控件基于下拉更改事件

本文关键字:事件 于下拉 隐藏 控件 显示 | 更新日期: 2023-09-27 18:14:51

我们有一个库存页面,我们需要为70列填充值,即70个diff类型的控件。

但是客户希望根据特定的下拉类型选择输入强制列,并且他也不想查看非强制控件。他还想要一个页面来映射哪个列对于哪个类型

是强制的

例子:

对于Student College是必填字段,而Company是非必填字段,客户希望单独看到 College 文本框,而不是Company文本框对于雇员学院和公司都是强制性的,所以客户希望看到两个文本框。

尝试使用jQuery对少数控件的性能很好,但对70个控件的性能很差。还有其他有效的方法吗?

在我的页面中有70个输入控件和70个标签,所有控件的可见性必须基于单个下拉更改事件进行更改。

Jquery函数;

function GetControlVisiblityByAssetID(assetID) {
            var service = getAbsolutePath() + "/Services/CMDBServices.asmx/GetControlVisiblityByAssetID"
            $.ajax({
                type: "POST",
                url: service,
                data: "{'assetId' : '" + assetID + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var reference = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
                    for (var j = 0; j < reference.length; j++) {
                        ControlName[j] = reference[j].ControlName;
                        IsVisible[j] = reference[j].IsVisible;
                        ControlType[j] = reference[j].ControlType;
                        if (IsVisible[j]) {
                            $("'"" + GetSelectorType(ControlType[j]) + "'"[id$=" + ControlName[j] + "]").show();
                        }
                        else {
                            $("'"" + GetSelectorType(ControlType[j]) + "'"[id$=" + ControlName[j] + "]").hide();
                        }
                    }
                }
            });
        }
function GetSelectorType(ControlType) {
            switch (ControlType) {
                case 'TextBox':
                    return "input";
                    break;
                case 'DropDown':
                    return "select";
                    break;
                case 'lable':
                    return;
                    break;
            }
        }

显示隐藏控件基于下拉更改事件

您可以使用JQuery

在Jquery中使用hide(), show()slideToggle()函数来实现此目的。

由于你没有特别的代码,我不能在这里写完整的代码。

但作为参考,可以看看以下链接:

1。slideToggle ():

http://api.jquery.com/slideToggle/

2。隐藏():

http://api.jquery.com/hide/

3。show():

http://api.jquery.com/show/

相关文章: