I have select element on my page with 3 options. I need to show a different form below the select in-CodePudding

For example I have 3 choices in select input: I can select Fruit, Furniture or Movie.

When I select one of them, the form needs to show up below.

For every choice there need to be a different form.

Can anyone help me, how to make it work?

I know how to create forms and everything, but I don't know how they can be changed when the value of select is changed.

I am doing a project using HTML, CSS, JS and PHP.

CodePudding user response：

function myFunction(val) {
    document.getElementById('frutas').style.display = "none";
    document.getElementById('moveis').style.display = "none";
    document.getElementById('filmes').style.display = "none";

    document.getElementById(val).style.display = "block";
}

<form action="">
    <select name="" id="" onchange="myFunction(this.value)">
        <option value="">--selection--</option>
        <option value="frutas">Frutas</option>
        <option value="moveis">Móveis</option>
        <option value="filmes">Filmes</option>
    </select>
</form>

<div>
    <div id="frutas" style="display: none;">
        Você escolheu frutas
    </div>
    <div id="moveis" style="display: none;">
        Você escolheu moveis
    </div>
    <div id="filmes" style="display: none;">
        Você escolheu filmes
    </div>
</div>

I hope I helped you

CodePudding user response：

function myFunction(val) {

    if(val==""){
    document.getElementById("dynamic_part").innerHTML="<p>Please pick up any thing!!</p>";
    return;
    }

    const obj = {
      frutas : "<label>Fruit stuff</label><input type='text' value='Input the fruit    things'><br><label>Fruit stuff</label><input type='text' value='Input the fruit    things'>",
      moveis: "<label>Movie stuff</label><input type='text' value='Input the movie    things'>",
      filmes: "<label>Films stuff</label><input type='text' value='Input the films    things'><br><label>Films stuff</label><input type='text' value='Input the films    things'>"
    };
    
    document.getElementById("dynamic_part").innerHTML=obj[val];

}

input,select{
  height:40px;
  margin:10px;
}

<form action="">
    Select something
    <select name="" id="" onchange="myFunction(this.value)">
        <option value="">--selection--</option>
        <option value="frutas">Frutas</option>
        <option value="moveis">Móveis</option>
        <option value="filmes">Filmes</option>
    </select>
    
    <div id="dynamic_part">
        <p>Please pick up any thing!!</p>
    </div>
    
</form>