Question

我有一个表单，该表单必须根据从＃note-type中选择的值来隐藏（）字段（例如div）。我知道如何仅从一列隐藏块，但不了解如何一次隐藏不同列中的元素？下面的代码请告诉我我的js错误是什么，因为我是这种语言的新手。

<form method="POST" action="#">

<select name="note_type_id" id="note_type">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<div class="flex">
    <div class="first-column">
        <div>
            <div>some info</div>
            <div id="class-one">sdsdsds</div>
        </div>
    </div>
    <div class="second-column" id="class-two"> 
        <div>some info</div>
        <div>some info</div>
    </div>
</div>
</form>

<script>
       $(document).ready(function () {
            toggleFields();
            $("#note_type").change(function () {
                toggleFields();
            });
        });
        function toggleFields() {
            if ($("#note_type").val() === "5")
                $("#class-one").hide();
                $("#class-two").hide(); - Problem is here
            else if ($("#note_type").val() === "6")
                $("#class-one").hide();
                $("#class-two").hide(); - Problem is here
            else
                $("#class-one").show();
                $("#class-two").show(); - Problem is here
        }
    </script>

Answer 1

来自MDN：

如果（条件）

statement1

[else

statement2]

statement1

如果条件为真，则执行的语句。可以是任何语句，包括进一步嵌套的if语句。要执行多个语句，请使用block语句（{...}）对这些语句进行分组。要不执行任何语句，请使用空语句。

因此，您的问题与缺少阻止有关（例如：{}）

$("#note_type").on('change', function (e) {
    toggleFields();
}).trigger('change'); // in this way you call immediately the function...


function toggleFields() {
    if ($("#note_type").val() === "5") {
        $("#class-one").hide();
        $("#class-two").hide();
    } else if ($("#note_type").val() === "6") {
        $("#class-one").hide();
        $("#class-two").hide();
    } else {
        $("#class-one").show();
        $("#class-two").show();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="#">

    <select name="note_type_id" id="note_type">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>

    <div class="flex">
        <div class="first-column">
            <div>
                <div>some info</div>
                <div id="class-one">sdsdsds</div>
            </div>
        </div>
        <div class="second-column" id="class-two">
            <div>some info</div>
            <div>some info</div>
        </div>
    </div>
</form>

Answer 2

尝试替换您的函数，据我所知，在5 + 6选择的情况下，您需要隐藏那些div，否则显示'em

function toggleFields() {
    switch ($("#note_type").val()) {
        case "5":
        case "6":
            $("#class-one").hide();
            $("#class-two").hide();
            break;
        default:
            $("#class-one").show();
            $("#class-two").show();
            break;
    }
}

您的代码不包含功能括号if ([expression]) { ... [do something] ... }。

根据所选选项隐藏和显示不同列的DIV

2 个答案: