基於下拉值顯示/隱藏表單元素

我有一個要求，我有一個表格，其中一些字段是強制性的，有些不是。我有一個下拉式表單，首先有兩個條件是「顯示所有字段「，另一個是」只顯示必填字段「現在我想要做的是，當用戶選擇」顯示所有字段「而不是顯示所有字段，並且當用戶選擇」僅顯示必填字段「時，只會顯示必填字段。基於下拉值顯示/隱藏表單元素

<form:form method="POST" action="addCountry.htm" commandName="countryForm" id="countryForm"> 
    <table> 

    <tr> 
     <td>Select fields:</td> 
     <td align="center"> 
      <select name="fields"> 
       <option value="non mandatory">show all fields</option> 
       <option value="mandatory">show only mandatory fields</option> 
      </select> 
     </td> 
    </tr> 

     <tr> 
      <td>Country Name :</td> 
      <td><form:input path="countryName"/> 
      </td> 
     </tr> 
     <tr> 
      <td>Country ISD Code :</td> 
      <td><form:textarea path="countryISDCode" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Nationality :</td> 
      <td><form:textarea path="nationality"/></td> 
     </tr> 

     <tr> 
      <td colspan="3"><input type="submit" value="submit"/></td> 
     </tr> 
    </table> 
</form:form>

採取這種形式作爲其國名和國家ISD代碼是強制性的國籍降不下來的選擇我想說明這些領域的基礎上mandatory.Now一個例子。

問候 Brajesh

來源

2012-07-20 brajesh

你必須寫在下拉更改事件ü檢查索引或根據該索引/值，你會做ü想要什麼檢查值。意味着你可以按照你的要求展示。

來源

2012-07-20 12:51:36

將類別non-mandatory分配給每個非必填字段。然後附加一個事件處理程序的按鈕來切換非必填字段是否顯示：

$('#myButton').on('click', function() { 
    $('.non-mandatory').toggle(); 
});

來源

2012-07-20 12:52:15 Nick

你想隱藏就在輸入元素/控制或整個錶行？無論哪種情況，您都可以將css類應用於相應的DOM元素，然後綁定下拉列表的onchange事件以根據所選值處理隱藏和顯示。

所以在情況下，你要隱藏整個錶行，每個TR您可以應用的CSS類不是「強制性」和「非強制」，那麼在你的JavaScript，你可以做到以下幾點：

$('#myDropdownlist').con('change', function() { 
    if ($(this).val() === 'mandatory') { 
     $('.nonMandatory').hide(); 
     $('.mandatory').show(); 
    } else { 
     $('.nonMandatory').show(); 
     $('.mandatory').hide();    
    } 
});

希望有幫助

來源

2012-07-20 12:53:58 mreyeros

基於下拉值顯示/隱藏表單元素

回答

相關問題