How to set conditional visibility in html?

Question

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.

You can't. You need to either submit the form and use Java or apply browser-side JavaScript. — Quentin, Nov 10 '16 at 11:00
@RajeshGrandhi yes, I tried something like this but it didn't work...I probably missed something. Please see the updated code — Ivan, Nov 10 '16 at 11:04
you have to give change event for select.Not for div. Identified that change event is binded to div.Its wrong. — Rajesh Grandhi, Nov 10 '16 at 11:09
Try angularjs [Binding ng-show to a select option in AngularJS](http://stackoverflow.com/q/12804163/3529309) — Bills, Nov 10 '16 at 11:20
You can try `angularjs` which let keep code less [Binding ng-show to a select option in AngularJS](http://stackoverflow.com/q/12804163/3529309) — Bills, Nov 10 '16 at 11:25

score 2 · Answer 1 · answered Nov 10 '16 at 11:04

2

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>

answered Nov 10 '16 at 11:04

diiN__________

7,393
6
42
69

Thanks, it works but it hides both elements, not just one – Ivan Nov 10 '16 at 11:14
In this case give the one that you want to hide an `id` and access it through `$("#yourId").hide();`. – diiN__________ Nov 10 '16 at 11:19

Azurlake · Answer 2 · 2016-11-10T11:10:50.137

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.

score 1 · Accepted Answer · answered Nov 10 '16 at 11:19

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>

How to set conditional visibility in html?

3 Answers3