如何通过 Jquery 在添加和编辑项目页面上隐藏/显示表单字段

Question

我正在为 Intranet 创建库存应用程序。我使用了 Property Agent 模块和 DotNetNuke 应用程序来准备我的表单。

因为表单域很多；我想默认隐藏大部分表单字段，并在从相关下拉列表中选择相应的选择值时显示它们。

在向库存添加新项目时，我已成功隐藏/显示表单字段；但是我无法在产品编辑表单上取消隐藏填写的表单字段。我不擅长 Jquery，所以我尝试在这里使用主题来获得想要的结果，但没有运气。

我添加项目的页面url是：intranetApp/tabid/121/personel/EditProperty/language/tr-TR/Default.aspx

[上页显示隐藏作品]

我用于编辑项目的页面网址是： intranetApp/tabid/121/personel/EditProperty/kayitNo/{propertyid}/language/tr-TR/Default.aspx

[虽然我想要显示填充框+所选项目的行；它们默认是隐藏的，我需要在 Cihaz Tipi 的值之间切换才能显示隐藏的行。

我认为在您的帮助下，我可以调整脚本并获得正确的结果。

      $(document).ready(function() {
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_5').hide(); //Varsayılan                olarak Cihaz Markası alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_6').hide(); //Varsayılan olarak Diğer Marka alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_7').hide(); //Varsayılan olarak Model alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_10').hide(); //Varsayılan olarak Anakart Markası alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_11').hide(); //Varsayılan olarak Anakart Modeli alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_12').hide(); //Varsayılan olarak Anakart Seri No alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_13').hide(); //Varsayılan olarak İşlemci markası alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_14').hide(); //Varsayılan olarak İşlemci modeli ve frekansı alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_15').hide(); //Varsayılan olarak sistemdeki ram miktarı alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_16').hide(); //Varsayılan olarak Ana Bellek Türü alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_17').hide(); //Varsayılan olarak Ana Bellek Modül Sayısı alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_18').hide(); //Varsayılan olarak Hard Disk türü alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_19').hide(); //Varsayılan olarak Hard Disk Kapasitesi alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_20').hide(); //Varsayılan olarak Hard Disk Seri No alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_21').hide(); //Varsayılan olarak Cihaza Takılı Kartlar alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_22').hide(); //Varsayılan olarak Cihaza Takılı Sürücüler alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_23').hide(); //Varsayılan olarak Monitör markası alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_24').hide(); //Varsayılan olarak Monitör tipi alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_25').hide(); //Varsayılan olarak Monitör boyutu alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_26').hide(); //Varsayılan olarak Monitör seri no alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_27').hide(); //Varsayılan olarak Yazici Renk Secimi alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_28').hide(); //Varsayılan olarak Yazicida Kulllanilan Kagit Tipi alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_29').hide(); //Varsayılan olarak Veri Iletisim Agina Baglanti Sekli alanini sakla

      $('#dnn_ctr499_Default_EditProperty_rptDetails_21_3').bind('change', function() { //Cihaz tipi alanindan yapilacak secime gore
var optionValue = $("#dnn_ctr499_Default_EditProperty_rptDetails_21_3").val();

switch (optionValue)
{
  case 'Masaüstü Bilgisayar': // Cihaz tipi listeden masaüstü bilgisayar olarak secildiginde

    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_5").show(); //Cihaz Markası secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_6").hide(); //Diğer Marka seçimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_7").show(); //Cihaz Modeli seçimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_10").show(); //Anakart Markası secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_11").show(); //Anakart Modeli secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_12").show(); //Anakart Seri No secimini goster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_13').show(); //İşlemci Markası seçimini göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_14').show(); //İşlemci modeli ve frekansı seçimini göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_15').show(); //Sistemdeki ram miktarı alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_16').show(); //Ana Bellek Türü alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_17').show(); //Ana Bellek modül sayısı alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_18').show(); //Hard Disk Türü alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_19').show(); //Hard Disk Kapasitesi alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_20').show(); //Hard Disk seri no alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_21').show(); //Cihaza Takılı Kartlar alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_22').show(); //Cihaza Takılı Sürücüler alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_23').show(); //Monitör markası alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_24').show(); //Monitör tipi alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_25').show(); //Monitör boyutu alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_26').show(); //Monitör seri no alanını göster

    break;
    case 'Dizüstü Bilgisayar': // Cihaz tipi listeden dizüstü bilgisayar olarak secildiginde
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_5").show(); //Cihaz Markası seçimini göster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_6").show(); //Diğer Marka seçimini göster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_7").show(); //Cihaz Modeli seçimini göster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_10").hide(); //Anakart Markası secimini sakla
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_11").hide(); //Anakart Modeli secimini sakla
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_12").hide(); //Anakart Seri No secimini sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_13').hide(); //İşlemci Markası seçimini sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_14').hide(); //İşlemci modeli ve frekansı seçimini sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_15').hide(); //Sistemdeki ram miktarı alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_16').hide(); //Ana Bellek Türü alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_17').hide(); //Ana Bellek modül sayısı alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_20').hide(); //Hard Disk seri no alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_23').hide(); //Monitör markası alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_24').hide(); //Monitör tipi alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_25').hide(); //Monitör boyutu alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_26').hide(); //Monitör seri no alanını sakla

    break;
  case 'Laser Yazıcı':
  case 'Inkjet Yazıcı':
  case 'Dot Matrix Yazıcı':  
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_27").show(); //Yazici Renk Secimi secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_28").show(); //Yazicida Kulllanilan Kagit Tipi secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_29").show(); //Veri Iletisim Agina Baglanti Sekli  secimini goster

  default:
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_10").hide();
    //$('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_11').hide();
    //$('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_12').hide();
    break;
    }
    });
    });

我的 HTML 位于：

https://gist.github.com/anonymous/5362300

Answer 1

一个选项可能不是最强大的，但可以在没有太多字段的情况下充分发挥作用。如果将其他字段放入数组中，您还可以循环 if 语句。

理论：在 if 语句中使用 onblur 句柄，然后运行函数并根据答案传递参数。

如果无法添加 html 代码，请使用 jquery 中的 .bind()

IE

function checkValues (elementId) {
var checkThis = $(elementId).val();

if (checkThis==/*Enter what you are looking for*/) {
    $("/*SHOW THIS ID*/").show();
    //hide original form element if needed
    $(elementId).hide();
    return;
}
//repeat if statements as necessary

    alert("entry not found");
};

}