When selecting an option in select Exchange form fields

Question

I am creating an event website for a friend, and for the registration form I have the following situation:

<h1>Formulario de Inscrição</h1>
<form name="incrição">
<b>Nome Completo:</b></br> <input type="text" size="100" placeholder="Digite seu nome completo" required></br></br>
<b>Endereço:</b></br> <input type="text" size="100" placeholder="Digite seu endereço - Rua ******** ***** ****** Nº***" required></br></br>
<b>Telefone:</b></br> <input type="text" size="100" placeholder="(DDD) 9XXXX -XXXX" required maxlength="12" >
</br></br>
<b>Incrição para o campeonato de:</b></br>
<select name="Inscrição">
    <option method="post" value="Cosplay" name="Cosplay">Cosplay</option>
    <option method="post" value="Smite" name="Smite">Smite</option>
    <option method="post" value="" name="K-pop">K-Pop</option>
    <option method="post" value="Bey Blade" name="Bey Blade">Bey Blade</option>
    <option method="post" value="Just Dance" name="Just Dance">Just Dance</option>
    <option method="post" value="Quadribol" name="Quadribol">Quadribol Terrestre</option>
    <option method="post" value="Anime Quiz" name="Anime Quiz" value="cosplay">Anime Quiz<option>
    <option method="post" value="Desenho"  name="Desenho" value="cosplay">Competição de Desenho</option>
</select>
</form>

I need that when the option "Cosplay" is selected for example, new inputs appear below the option with new questions, since each registration has different requirements... Ex: Character:

Answer 1

You’ll have to use a little css and a little js

Notes before you start

• I recommend not using accents in the Names and ids attributes, e.g. <select name="Inscrição"> for <select name="inscricao">
• Don’t use more than one value within one <option>, ex: change <option method="post" value="Anime Quiz" name="Anime Quiz" value="cosplay"> for <option method="post" value="Anime Quiz">
• Do not use in options attributes, name must go inside select only, e.g. <option method="post" value="Cosplay" name="Cosplay">Cosplay</option> for <option value="Cosplay">Cosplay</option>
• Tag <option> should not have the method attribute, this attribute is only for the tag <form>
• In the example below the attribute data- is necessary to detect the fields that must be displayed.
• I recommend using jQuery to facilitate.

Recommend adding the select option, follow a full example:

$("#selecionar").change(function() {
    var $this, secao, atual, campos;
  
    campos = $("div[data-name]");
    
    campos.addClass("hide");

    if (this.value !== "") {
        secao = $('option[data-section][value="' + this.value + '"]', this).attr("data-section");
      
        atual = campos.filter("[data-name=" + secao + "]");
      
        if (atual.length !== 0) {
            atual.removeClass("hide");
        }
    }
});

.hide
{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Formulario de Inscrição</h1>
<form name="incrição">
    <b>Nome Completo:</b></br> <input type="text" size="100" placeholder="Digite seu nome completo" required></br></br>
    <b>Endereço:</b></br> <input type="text" size="100" placeholder="Digite seu endereço - Rua ******** ***** ****** Nº***" required></br></br>
    <b>Telefone:</b></br> <input type="text" size="100" placeholder="(DDD) 9XXXX -XXXX" required maxlength="12" >
    </br></br>
    <b>Incrição para o campeonato de:</b></br>
    <select name="Inscricao" id="selecionar">
        <option value="">Selecionar...</option>
        <option data-section="cosplay" value="Cosplay">Cosplay</option>
        <option data-section="smite" value="Smite">Smite</option>
        <option data-section="k-pop" value="K-pop">K-Pop</option>
        <option data-section="bey-blade" value="Bey Blade">Bey Blade</option>
        <option data-section="just-dance" value="Just Dance">Just Dance</option>
        <option data-section="quadribol" value="Quadribol">Quadribol Terrestre</option>
        <option data-section="anime-quiz" value="Anime Quiz">Anime Quiz<option>
        <option data-section="desenho" value="Desenho">Competição de Desenho</option>
    </select>

    <div data-name="cosplay" class="hide">
        Campos cosplay: <input type="text" value=""><br>
    </div>

    <div data-name="smite" class="hide">
        Campos smite: <input type="text" value=""><br>
    </div>

    <div data-name="k-pop" class="hide">
        Campos kpop: <input type="text" value=""><br>
    </div>

    <div data-name="bey-blade" class="hide">
        campos bey-blade: <input type="text" value=""><br>
    </div>

    <div data-name="just-dance" class="hide">
        just-dance: <input type="text" value=""><br>
    </div>

    <div data-name="quadribol" class="hide">
        quadribol: <input type="text" value=""><br>
    </div>

    <div data-name="anime-quiz" class="hide">
        anime quiz: <input type="text" value=""><br>
    </div>

    <div data-name="desenho" class="hide">
        desenho: <input type="text" value=""><br>
    </div>
</form>