如何在 html 中设置条件可见性？答案

【问题标题】：How to set conditional visibility in html?如何在 html 中设置条件可见性？
【发布时间】：2016-11-10 10:58:53
【问题描述】：

我有以下代码：

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

我想让“columns medium-6”只有在“selectbox form__element”中选择了特定项目时才可见，例如“Strom”。顺便提一下，这段代码取自 .jsp 文件，其中没有“head”和“body”标签。

我已经试过了：

<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 代码的最佳位置。

【问题讨论】：

你不能。您需要提交表单并使用 Java 或应用浏览器端 JavaScript。
最好使用 javascript/jquery 来实现这一目标
@RajeshGrandhi 是的，我尝试过类似的方法，但没有成功……我可能错过了一些东西。请查看更新后的代码
您必须为 select 提供更改事件。而不是为 div。识别出change事件绑定到了div上。是错误的。
添加了更新的代码作为答案。请检查。

标签： html jsp

【解决方案1】：

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

【讨论】：

谢谢，它可以工作，但它隐藏了两个元素，而不仅仅是一个
在这种情况下，给您想要隐藏的id 并通过$("#yourId").hide(); 访问它。

【解决方案2】：

我更新了代码。

试试下面的代码，它的工作正常。

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

【讨论】：

【解决方案3】：

您可以使用 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>

这样您就可以听到选择框上的变化并采取相应的行动。

【讨论】：