Question

我有以下代码：

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

我想制作＆＃34;列中6和＃34;只有在＆＃34; selectbox form__element＆＃34;中选择特定项目时才可见，例如＆＃34; Strom＆＃34;。只是要提一下，这段代码来自.jsp文件，其中没有＆＃39; head＆＃39;和＆＃39;身体＆＃39;标签

我已经尝试过了：

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

Answer 1

您需要onchange上的select个活动：

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

Answer 2

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

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

Answer 3

我更新了代码。

尝试以下代码及其正常工作。

＆＃13;

$(document).ready(function (){
        $(".selectbox").change(function() {
            if ($(this).val() == "Erdgas" || $(this).val() == "Strom") {
                $("#kWh").show();
            }else{
                $("#kWh").hide();
            }
        });
    });

＆＃13;

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

＆＃13;

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

3 个答案: