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

时间:2013-04-11 10:27:03

标签: javascript jquery asp.net html forms

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

由于形式领域众多;我希望默认隐藏大部分表单字段,并在从相关下拉列表中选择相应的选择值时显示它们。

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

我添加项目的网址是:intranetApp / tabid / 121 / personel / EditProperty / language / tr-TR / Default.aspx

[显示隐藏在上面的页面中工作]

我的用于编辑项目的页面网址是: intranetApp / tabid / 121 /企业人事/ EditProperty / kayitNo / {物业ID} /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

1 个答案:

答案 0 :(得分:0)

一个选项可能不是最强大的选项,但是在没有太多字段的情况下可以充分发挥作用。如果将其他字段放入数组中,也可以循环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");
};

}