HTML表單字段根據從下拉菜單中選擇的選項進行顯示/隱藏

Question

今天，我在開發網站的過程中面臨另一個大問題。 我有一些基本CSS的普通形式。 現在，我想以這種方式使用表單，默認情況下將隱藏某些字段，根據從下拉列表中選擇的菜單激活相應的文本字段。 我首先想到用PHP進行其他操作，但這對我的要求不適當。 我想要一些無需刷新即可在同一頁面上執行的代碼。 所以我需要一些JavaScript或jQuery或Ajax 。 但是我的語言不好，因此需要您的幫助。

經過大量的Google搜索，我發現了一段對我有用的JavaScript代碼。 那是http://jsfiddle.net/ZxLU9/

但是問題在於它只適用於網站上給出的兩個選項。 我試圖添加id3 。 但是，每當我增加一個id時，代碼就不再起作用。 另外，盡管此代碼使用了tbody，但隱藏的表單設計已被完全破壞。 我在這里分享我的完整代碼。 在代碼中有一些PHP代碼，請忽略它，我現在不關心它。 只要用我的實際設計解決這個問題即可。
請
您可以在此處訪問完整的代碼： http : //jsfiddle.net/QvJH6/2/

檢查名為EXTRA的字段。 。 。 。 那就是我要放置該代碼的地方。

Answer 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.
     }
   }
 });

如果您使所有內容保持一致，那應該會起作用。 如果不是，那么您將必須為每個選擇框做一個，並指定要顯示的字段

Answer 2

//更改來自的函數調用

// onchange =“ display（this，'text'，'image'）;”

// // // 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';
           }

}