CODEWITHSUNDEEP
htmljsp
Ivan
Ivan

Reputation: 1171

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.

Upvotes: 0

Views: 4079

Answers (3)

Rajesh Grandhi
Rajesh Grandhi

Reputation: 378

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>

Upvotes: 1

Azurlake
Azurlake

Reputation: 632

You can use JQuery in order to achieve this, but you have to listen for changes on the select tag, not on the div one:

<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>

This way you listen to changes on the select box and act accordingly.

Upvotes: 1

diiN__________
diiN__________

Reputation: 7656

You need an onchange event on your select:

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

Add a script tag with the particular function:

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

Upvotes: 2

Related Questions