How do I show a <select> when selecting a <option> in the form?

Asked

Viewed 116 times

0

The code goes like this:

<form name="frm1" action="#" method="post"> 

<option id="pacote1" class="form-control">Pacote</option> 
<option id="pacote2" class="form-control">Pacote 2</option> 

<select name="pacote" class="form-control">
<option value="1">Pacote Primario</option>"

I’d like to insert something into option, where I select the option of id="pacote1", will call the select "pacote" for the form, and if I select the 2, will call the new Lect2 with the content for the form.

javascript html
  • 1

    Are two <select>, the second depends on the first?

  • This, the <select> depends on the first <option>, but it has to be outside the form, it can only appear when selected because of the function within php

  • 4

    @Cmte-cardinal you removed the PHP tag from the question, but kept Java? I didn’t get it.

  • 1

    <option id="pacote1" class="form-control">Package</option> <option id="pacote2" class="form-control">Package 2</option> , but why are you using it this way? Your question’s a little fuzzy..

2 answers

2

I don’t know if it suits you perfectly, but I hope it helps you in the development of the solution. Hugção.

document.getElementById('pacotes').addEventListener('change', function(){

    var pacote = this.options[this.options.selectedIndex].value;
    preencheForm('frm1', parseInt(pacote));
});

function preencheForm(form, pacote){

    switch (pacote) {
        case 0:
        document.getElementsByName(form)[0].innerHTML = 
        `Selecione um pacote acima para começar...`
        ;
        break;
        case 1:
        document.getElementsByName(form)[0].innerHTML = 
        `
        <label for="pacote">Opções do Pacote</label>
        <select name="pacote" id="pacote" class="form-control">
            <option value="1">Pacote Primario</option>
        </select>
        <input type="submit" value="Enviar">
        `
        ;
        break;
        // coloque as outras opções aqui...
        default:
        document.getElementsByName(form)[0].innerHTML = 
        `Este pacote não possui opções, escolha outro...`
        ;
    }
}
label {
  display: block;
}
<label for="pacotes">Pacotes</label>
<select id="pacotes">
    <option value="0">-- selecione --</option> 
    <option value="1">Pacote 1</option> 
    <option value="2">Pacote 2</option>
</select>
<form name="frm1" action="#" method="post">  
    Selecione um pacote acima para começar...
</form>

0

Using Jquery

var options = $("#d2").html();
$("#d1").change(function(e) {
    var selectedValue = $("#d1 :selected").val();
    $("#d2").html(options);
    $('#d2 :not([value="'+selectedValue+'"])').remove();
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<select name="d1" id="d1" tabindex="4" class="form-control toHide">
  <option value="">Selecione</option>
  <option value="1">Pacote</option>
  <option value="2">Pacote 2</option>
</select>
<select name="d2" id="d2" tabindex="5" class="form-control toHide">
  <option value="">Selecione</option>
  <option value="1">Pacote Primário</option>
  <option value="2">Pacote Secundário</option>
</select>
</div>

  • It worked! Thank you.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.