Ivan Ivan - 25 days ago 12
HTML Question

How to set conditional visibility in html?

I have the 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 would like to make "columns medium-6" be visible only if particular item is selected in "selectbox form__element", for example "Strom". Just to mention that this code is taken from .jsp file in which there are no 'head' and 'body' tags.

I already 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 it didn't work....I probably missed something, and also I don't know ehre is the best place to put this javascript code.

Answer

I updated the code.

Try below code and its 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