时间戳

首页 > 解决方案 > 如何根据用户选择隐藏表单字段？

javascript - 如何根据用户选择隐藏表单字段？

问题描述

我想根据用户选择的品牌显示不同的视频游戏平台列表。

如果用户选择“任天堂”，我希望任天堂平台出现，如果他们选择微软，我希望微软平台出现。我已经尝试了搜索中出现的所有内容，但我无法得到任何工作。

我正在使用单选按钮进行品牌选择。

{% extends "base.html" %}

{% block title %} Add a new item {% endblock %}

{% block head %}
{{ super() }}
{% endblock %}

{% block body %}
<h2>New item!</h2>
<p>{{ error }}</p>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
<form action="/do_insert_new_item" method="post" id="form_games">

    <div class="form-group row">
        <label class="col-4" for="branding_list[]">Branding</label>
        <div class="col-8l">
            <select id="TypeOfPlatform">
            <div class="custom-control custom-radio custom-control-inline">

                <input name="branding_list[]" id="branding_0" type="radio" class="custom-control-input" value="Nintendo"
                       required="required">
                <label for="branding_0" class="custom-control-label">Nintendo</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
                <input name="branding_list[]" id="branding_1" type="radio" class="custom-control-input"
                       value="Microsoft" required="required">
                <label for="branding_1" class="custom-control-label">Microsoft/XBOX</label>
            </div>

            </select>
     </div>
    </div>




    <div class="form-group row" style="display:none;" id="platforms_nin">
        <label class="col-4">Platform</label>
        <div class="col-8" id="platforms">
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_0" type="checkbox" class="custom-control-input"
                       value="Nintendo switch" aria-describedby="platformHelpBlock">
                <label for="platform_0" class="custom-control-label">Nintendo Switch</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_1" type="checkbox" class="custom-control-input"
                       value="Gameboy" aria-describedby="platformHelpBlock">
                <label for="platform_1" class="custom-control-label">Gameboy</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_2" type="checkbox" class="custom-control-input"
                       value="Gameboy Color" aria-describedby="platformHelpBlock">
                <label for="platform_2" class="custom-control-label">Gameboy Color</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_3" type="checkbox" class="custom-control-input" value="GBA"
                       aria-describedby="platformHelpBlock">
                <label for="platform_3" class="custom-control-label">GBA/GBA SP</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_4" type="checkbox" class="custom-control-input" value="Wii"
                       aria-describedby="platformHelpBlock">
                <label for="platform_4" class="custom-control-label">Nintendo Wii</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_32" type="checkbox" class="custom-control-input" value="WiiU"
                       aria-describedby="platformHelpBlock">
                <label for="platform_32" class="custom-control-label">Wii U</label>
            </div>

            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_5" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="DS">
                <label for="platform_5" class="custom-control-label">Nintendo DS Family</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_6" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="3DS">
                <label for="platform_6" class="custom-control-label">Nintendo 3DS Family</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_7" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="Other Nintendo">
                <label for="platform_7" class="custom-control-label">Other Nintendo</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_8" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="NES and SNES">
                <label for="platform_8" class="custom-control-label">NES/SNES</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_9" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="N64">
                <label for="platform_9" class="custom-control-label">N64</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_10" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="Gamecube">
                <label for="platform_10" class="custom-control-label">GameCube</label>

                <div class="custom-control custom-checkbox custom-control-inline">
                    <input name="platform_list[]" id="platform_33" type="checkbox" aria-describedby="platformHelpBlock"
                           class="custom-control-input" value="Virtual boy">
                    <label for="platform_33" class="custom-control-label">Virtual Boy</label>
                </div>
                <div class="custom-control custom-checkbox custom-control-inline">
                    <input name="platform_list[]" id="platform_34" type="checkbox" aria-describedby="platformHelpBlock"
                           class="custom-control-input" value="Game and Watch">
                    <label for="platform_34" class="custom-control-label">Game and Watch</label>
                </div>

            </div>

            <span id="platformHelpBlock" class="form-text text-muted">Select all platforms that apply</span>
        </div>
    </div>
    </div>




<div id="microsoftDiv" class="togglehid hidden">
 <div class="form-group row">
        <label class="col-4">Platform</label>
        <div class="col-8" id="platforms">
        <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_11" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="Xbox">
                <label for="platform_11" class="custom-control-label">XBOX</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_12" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="Xbox360">
                <label for="platform_12" class="custom-control-label">XBOX 360</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_13" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="Xbox one">
                <label for="platform_13" class="custom-control-label">XBOX ONE</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input name="platform_list[]" id="platform_14" type="checkbox" aria-describedby="platformHelpBlock"
                       class="custom-control-input" value="Other Microsoft">
                <label for="platform_14" class="custom-control-label">Other Microsoft</label>
            </div>
         <span id="platformHelpBlock" class="form-text text-muted">Select all platforms that apply</span>
        </div>
    </div>
</div>





</form>
</div>
<script>

        $(document).on('change','#TypeOfPlatform',function() {
         if($("#TypeOfPlatform option:selected").text()=='Nintendo'){
          $('#platforms_nin').show();
         }else{
          $('#platforms_nin').hide();
            }
        });




</script>
{% endblock %}

标签： javascriptformshidden

解决方案

我在想如果你从选择条件更改为它工作的无线电条件。我试过这个并为我工作。

$(document).on('click','[name=branding_list]',function() {
         if($("[name=branding_list]:checked").val()=='Nintendo'){
          $('#platforms_nin').show();
         }else{
          $('#platforms_nin').hide();
            }
        });

推荐阅读