隐藏/显示表单字段基于下拉选择与类标记

hide/show form fields based on dropdown choice with class tag

本文关键字:选择 于下拉 显示 表单 字段 隐藏      更新时间:2023-09-26

我在应用程序表单上的显示/隐藏功能有问题。应用程序表单在这里是live -> http://www.specialfinance.co.uk/introducers/submit-an-enquiry/secured-loans.html

目前的形式作为一个多页的形式(在javascript内),这是很好的,它做的工作很好,但我不能找出基于任何Q& a指南我在这里看过(我已经通过许多谷歌搜索)是如何集成进一步的显示/隐藏脚本来隐藏申请人2列,如果在顶部的下拉菜单有一个值为1。

列是一个表,所有输入在单独的行中,所以我认为最简单的方法是链接到一个类,然后隐藏类,但我不知道如何做到这一点。

我用我的javascript知识到达那里,但这似乎是一个我无法克服的障碍。

您可以使用。change() (jQuery)与下拉列表查看值是什么,然后基于此,隐藏和显示您需要的

$("#idOfDropDown").change(function() {
    if ($(this).val() == 1) {
        //Show  or Hide what you need .show()
    }
    else {
        //Show or Hide .hide()
});

下面是一个使用类的演示:http://jsfiddle.net/Szt59/1/

下面是一个简单的例子。很容易看出如何扩展它。

$("#drop").change(function(){
    if( $(this).val() === "2" ) {
         $(".rest").slideDown("fast");   
    } else {
       $(".rest").slideUp("fast");     
   }
});

点击查看演示编辑。