根据特定输入显示特定类别

Question

这个代码是一个表单，我可以输入信息来创建一些东西。我的问题是我这个表单根据用户输入显示某些部分，但我不知道该怎么做。例如，对于“位置类型”部分，如果我单击“原始”，我希望仅显示“信息”部分，如果单击“交叉/现实”，则我希望仅显示“链接”部分。有人可以帮忙吗？ HTML 代码：

<form method="post">             
              <div class="form-group">
                <label>Type of Location</label>
                <select name="locationtype" class="form-control" required>
                    <option>Select one</option>
                    <option>Original</option>
                    <option>Crossover/Realistic</option>
                </select>
              </div>
              <div class="form-group">
                <label>Picture ID</label>
                     <select name="pictureid" class="form-control" required>
                                <option>Select one</option>
                                {% for x in pictures %}
                                    <option value="{{x.pictureid}}">{{x.picturename}}</option>
                                {% endfor %}
                            </select>
              </div>
              <div class="form-group">
                    <label>Information</label>
                         <textarea name="information" class="form-control" style="color: black">{{ location.information }}</textarea>
                </div>
              <div class="form-group">
                <label> Link</label>
                <input type="text" name="link" class="form-control" value="{{ location.link }}" required>
              </div>

</form>

Answer 1

$("#locationtype").change(function (e) {
    if ($(this).val().toLowerCase() == "original") {
        $(".dynamic-block").hide();
        $("#informationBlock").show();
    }
    else if ($(this).val().toLowerCase() == "crossover/realistic") {
        $(".dynamic-block").hide();
        $("#linkBlock").show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
    <div class="form-group">
        <label>Type of Location</label>
        <select id="locationtype" name="locationtype" class="form-control" required>
            <option>Select one</option>
            <option>Original</option>
            <option>Crossover/Realistic</option>
        </select>
    </div>
    <div class="form-group">
        <label>Picture ID</label>
        <select name="pictureid" class="form-control" required>
            <option>Select one</option>
            {% for x in pictures %}
            <option value="{{x.pictureid}}">{{x.picturename}}</option>
            {% endfor %}
        </select>
    </div>
    <div class="form-group dynamic-block" id="informationBlock" style="display: none;">
        <label>Information</label>
        <textarea name="information" class="form-control" style="color: black">{{ location.information }}</textarea>
    </div>
    <div class="form-group dynamic-block" id="linkBlock" style="display: none;">
        <label> Link</label>
        <input type="text" name="link" class="form-control" value="{{ location.link }}" required>
    </div>
</form>