如何在html中設置條件可見性？

Question

我有以下代碼：

<div class="form__group form__group--select" id="choice"> 
           <select name="area" class="selectbox form__element"> 
            <option selected="selected" value="">Sparte auswählen</option> 
            <option value="Erdgas">Erdgas</option> 
            <option value="Strom">Strom</option> 
            <option value="Telekommunikation">Telekommunikation</option> 
            <option value="Energiedienstleistungen">Energiedienstleistungen</option> 
           </select> 
           <div class="form__message"> 
            <div class="form__infotext"></div> 
            <div class="form__error"></div> 
           </div> 
          </div> 
         </div> 

         <div class="columns medium-6" id="kWh"> 
          <t:optionalTextField label="Ihr Jahresverbrauch in kWh" name="kWhPerYear" maxLength="100"/> 
         </div> 

我想作「列中-6」僅當特定項目中的「選擇框form__element」選擇，例如「斯特羅姆」是可見的。只要提到這段代碼是從沒有'head'和'body'標籤的.jsp文件中提取的。

我已經嘗試過這樣的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 
     $("#choice").change(function() { 
      if ($(this).val() == "Erdgas" || (this).val() == "Strom") { 
       $("#kWh").show(); 
      }else{ 
       $("#kWh").hide(); 
      } 
     }); 
    }); 
</script> 

，但沒有奏效....我可能錯過了一些東西，也不知是EHRE把這段JavaScript代碼的最佳場所。

Answer 1

我更新的代碼。

嘗試下面的代碼，它的工作正常。

$(document).ready(function(){ 
 
     $(".selectbox").change(function() { 
 
      if ($(this).val() == "Erdgas" || $(this).val() == "Strom") { 
 
       $("#kWh").show(); 
 
      }else{ 
 
       $("#kWh").hide(); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form__group form__group--select" id="choice"> 
 
           <select name="area" class="selectbox form__element"> 
 
            <option selected="selected" value="">Sparte auswählen</option> 
 
            <option value="Erdgas">Erdgas</option> 
 
            <option value="Strom">Strom</option> 
 
            <option value="Telekommunikation">Telekommunikation</option> 
 
            <option value="Energiedienstleistungen">Energiedienstleistungen</option> 
 
           </select> 
 
           <div class="form__message"> 
 
            <div class="form__infotext"></div> 
 
            <div class="form__error"></div> 
 
           </div> 
 
          </div> 
 
         
 

 
         <div class="columns medium-6" id="kWh"> 
 
          <label name="kWhPerYear" maxLength="100">Ihr Jahresverbrauch in kWh</label> 
 
         </div>

Answer 2

您可以爲了實現這一目標使用JQuery，但你必須用於偵聽select標籤的變化，而不是在div之一：

<script> 
    $('#select_field_id').change(function() { 
     var selectionText = $('#select_field_id').find(":selected").text(); 
     if (selectionText == 'something') { 
      $('.columns.medium-6).show(); 
     } else { 
      $('.columns.medium-6).hide(); 
     } 
    }); 
</script> 

這樣你聽上的選擇變化並相應地採取行動。

Answer 3

您需要在select的onchange事件：

<select name="area" class="selectbox form__element" onchange="hideColMed6(this)"> 

添加腳本標記與特定功能：

<script type="text/javascript"> 
    function hideColMed6(selected) { 
     var value = selected.value; 
     if (value == "Strom") 
      $(".columns.medium-6").hide(); 
     else 
      $(".columns.medium-6").show(); 
    } 
</script>