HTML表單字段根據下拉列表中的選項顯示/隱藏

今天，我面臨着開發我的網站的另一個大問題。我有一些基本的CSS的正常形式。現在我想以這種方式使用表格，默認情況下會隱藏一些字段，相應的文本字段將按照從下拉列表中選擇的菜單被激活。我首先想到用其他方式來完成PHP，但這不適合我的需求。我想要一些代碼，將在不刷新的情況下在同一頁面上執行操作。所以我需要一些JavaScript或jQuery或Ajax工作。但我不擅長這種語言，所以我需要你的幫助。HTML表單字段根據下拉列表中的選項顯示/隱藏

做了大量的googleing之後，我找到了一段JavaScript代碼，它對我很有幫助。這是http://jsfiddle.net/ZxLU9/

但問題是它只是爲兩個選項，因爲它是在網站上給出的。我試圖添加id3。但是，當我增加一個id時，代碼不再工作。此外，雖然此代碼使用tbody隱藏的表單設計完全破碎。我在這裏分享我的完整代碼。在代碼中有一些PHP代碼，忽略了，我現在不關心這個。只是用我的實際設計來解決這個問題。
請
您可以訪問完整的代碼在這裏：http://jsfiddle.net/QvJH6/2/

檢查NAMED額外的領域。。。。這是我想要放置該代碼的那個。

來源

2012-08-08 Saumya Majumder

//從

//平變化=「顯示（這一點，‘文字’，‘圖像’改變函數調用）;」

//至 // 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-08 19:12:09 saianirudh

非常感謝您的幫助。 :) – 2012-08-09 14:38:30

在這方面有一個巨大的問題。當我將頁面1.php中的值發佈到頁面2.php時，提交按鈕僅適用於選擇下拉菜單中出現的最後一個選項。如果我選擇其他選項並嘗試提交表單，表單提交選項不能用另一個單詞工作，則表單** action **不起作用。請幫忙。 – 2012-08-11 08:01:11

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

這應該工作，如果你讓一切都一致。如果沒有，那麼你將不得不做一個對每個選擇框，specifiy哪些字段顯示

來源

2012-08-08 19:07:38

可以請你告訴我如何使用它？ – 2012-08-08 20:27:32

稍微複雜一些，但它可以用於幾十個選擇而不會有太大變化。我使用了很多通用名稱，因此您可以更改它們。我還使用了一個屬性調用data-select將字段與選項綁定http://jsfiddle.net/QMYpM/ – 2012-08-08 23:54:25

HTML表單字段根據下拉列表中的選項顯示/隱藏

回答

相關問題