jsp - How to set conditional visibility in html? -
i have following code:
<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>
i make "columns medium-6" visible if particular item selected in "selectbox form__element", example "strom". mention code taken .jsp file in there no 'head' , 'body' tags.
i tried this:
<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>
but didn't work....i missed something, , don't know ehre best place put javascript code.
i updated code.
try below code , working fine.
$(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>
Comments
Post a Comment