0

今天，我在开发网站的过程中遇到了另一个大问题。我有一个带有一些基本 CSS 的普通表单。现在我想以这种方式使用表单，默认情况下会隐藏某些字段，将根据从下拉列表中选择的菜单激活相应的文本字段。我首先想到用其他方式来做 PHP，但这不适合我的要求。我想要一些无需刷新即可在同一页面上起作用的代码。所以我需要一些JavaScript或jQuery或Ajax工作。但我不擅长这门语言，所以我需要你的帮助。

在进行了大量的谷歌搜索之后，我发现了一段对我有用的 JavaScript 代码。那是http://jsfiddle.net/ZxLU9/

但问题是它只适用于网站上给出的两个选项。我试图添加id3. 但是当我增加一个 id 时，代码就不再工作了。此外，虽然这段代码使用了tbody ，但隐藏的表单设计完全被破坏了。我在这里分享我的完整代码。在代码中有一些 PHP 代码，忽略它，我现在不关心这个。用我的实际设计解决这个问题。
请
您可以在这里访问完整的代码：http: //jsfiddle.net/QvJH6/2/

检查名为 EXTRA 的字段。. . . 那就是我要放置该代码的地方。

4

2 回答 2

1

使用 Jquery 更改事件。

 $('#select_box').change(function() {
   if($(this).val() == "somevalue"){
     if($(this).next('input').css("display") == "none"){
          $(this).next('label').show();
          $(this).next('input').show();
      //Code to hide any existing fields go here.
     }
   }
 });

如果您使所有内容保持一致，那应该会起作用。如果没有，那么您将必须为每个选择框做一个并指定要显示的字段

于 2012-08-08T19:07:38.387 回答
0

//改变函数调用

//onchange="display(this,'text','image');"

//to // onchange="display(this,'text','image',invisible);"

//并且还将您在javascript中的显示功能更改为

function display(obj,id1,id2,id3) {
           txt = obj.options[obj.selectedIndex].value;
           document.getElementById(id1).style.display = 'none';
           document.getElementById(id2).style.display = 'none';
           document.getElementById(id3).style.display = 'none';
           if ( txt.match(id1) ) {
              document.getElementById(id1).style.display = 'block';
           }
           if ( txt.match(id2) ) {
              document.getElementById(id2).style.display = 'block';
           }
           if ( txt.match(id3) ) {
              document.getElementById(id2).style.display = 'block';
           }

}

于 2012-08-08T19:12:09.697 回答