Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gustavo2

Validação SelectBox

Por , em Javascript

Recommended Posts

Gustavo2    0

Gustavo2
Postado

Apenas um exemplo de validação, entre outras funções importantes:

<html>
 
    <head>
        <title>ComboBox2</title>
    </head>
 
 
 
    <body>
        <style type="text/css">
            select {
                width: 200px;
            }
            
            option {
                width: 200px;
                position: {
                    center;
                }
                h2 {
                    position: absolute;
                    left: 100px;
                    top: 150px;
                }
                h3 {
                    position: right;
                    left: 100px;
                    top: 100;
                }
            }
        </style>
 
        <form id="validacaoSelectBox" name="validacaoSelectBox">
            <h2>
                Tipo:
                <SELECT ID="SlTipo" Name="Sltipo"> 
 
 
<option value=""></option>
<option value="Carro">Carro
</option>
 
<option value="Moto">Moto
</option>
 
 
</select>
            </h2>
 
 
            <h2>
                Marca:<select id="SlMarca" name="SlMarca">
 
<option value=""></option>
 
 
</select>
            </h2>
 
            <h2>
                Modelo:<select id="SlModelo" name="SlModelo">
 
<option value=""></option>
 
</select>
            </h2>
 
            <select id="SlAno" name="SlAno" style="visibility:hidden"> Ano de Fabricação
 
<option value=""></option>
 
</select>
 
            <select id="SlVersao" name="SlVersao" style="visibility:hidden">Versao
 
<option value=""></option>
 
</select>
 
            <h3>
                <SELECT ID="Nportas" NAME="Nportas" style="visibility:hidden">
 
    <option value=""></option>
 
</select>
            </h3>
 
 
 
            <input type="submit" onClick="validacao();"></input>
 
        </form>
 
    </body>
    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
        function validacao() {
            if (document.validacaoSelectBox.SlTipo.value == '') {
 
                alert("Opção \"Tipo\" vazio. Selecione uma opção")
            } else if (document.validacaoSelectBox.SlTipo.value == '') {
 
            }
 
 
        }
 
 
        $("#SlTipo").on("change", function() {
 
            if ($(this).val() === "Carro") {
 
 
                $("#SlMarca").html("<option value=''></option>");
                $("#SlMarca").html("<option value=''></option>");
 
 
                $("#SlMarca").append("<option value='Chevrolet'>Chevrolet</option>");
                $("#SlMarca").append("<option value='Fiat'>Fiat</option>");
 
 
 
 
            } else if ($(this).val() === "Moto") {
 
                $("#SlMarca").html("<option value=''></option>");
                $("#SlMarca").html("<option value=''></option>");
 
                $("#SlMarca").append("<option value='bmw'>BMW</option>");
                $("#SlMarca").append("<option value='honda'>Honda</option>");
 
 
                $("#SlModelo").html("<option value=''></option>");
                $("#SlModelo").html("<option value=''></option>");
                $("#SlModelo").html("<option value=''></option>");
 
 
 
            }
        })
 
 
        $("#SlMarca").on("change", function() {
 
 
            if ($(this).val() === "Chevrolet") {
 
                $("#SlModelo").html("<option value=''></option>");
                $("#SlModelo").html("<option value=''></option>");
                $("#SlModelo").html("<option value=''></option>");
                $("#SlModelo").append("<option value='Celta'>Celta</option>");
                $("#SlModelo").append("<option value='Opala'>Opala</option>");
                $("#SlModelo").append("<option value='Monza'>Monza</option>");
 
 
 
 
            } else if ($(this).val() === "Fiat") {
 
                $("#SlModelo").html("<option value=''></option>");
                $("#SlModelo").html("<option value=''></option>");
                $("#SlModelo").append("<option value='Uno'>Uno</option>");
                $("#SlModelo").append("<option value='Tipo'>Tipo</option>");
 
            }
 
            if ($(this).val() === "bmw") {
 
 
                $("#SlModelo").append("<option value='bmw1'>BMW1</option>");
                $("#SlModelo").append("<option value='bmw2'>BMW2</option>");
 
 
            } else if ($(this).val() === "honda") {
 
 
                $("#SlModelo").append("<option value='cg125'>CG125</option>");
                $("#SlModelo").html("<option value=''></option>");
 
 
 
 
            }
 
            $("#SlModelo").on("change", function() {
 
                if ($(this).val() === "Celta") {
 
 
                    document.getElementById('SlAno').style.visibility = 'visible';
 
                    $("#SlAno").html("<option value''></option>");
 
                    $("#SlAno").append("<option value='SlAno'>2000</option>");
                    $("#SlAno").append("<option value='SlAno'>2017</option>");
 
 
 
 
                } else if ($(this).val() === "Opala") {
 
                    document.getElementById('SlAno').style.visibility = 'visible';
 
 
                    $("#SlAno").html("<option value''></option>");
 
 
 
                    $("#SlAno").append("<option value='1967'>1967</option>");
                    $("#SlAno").append("<option value='1989'>1989</option>");
 
 
 
 
                } else if ($(this).val() === "Monza") {
 
                    $("#SlAno").html("<option value''></option>");
 
                    $("#SlAno").append("<option value='1989'>1989</option>");
                    $("#SlAno").append("<option value='1999'>1999</option>");
 
 
 
 
                }
 
 
                $("#SlAno").on("change", function() {
 
                    if ($(this).val() === "1989") {
 
                        document.getElementById('Nportas').style.visibility = 'visible';
 
 
                        $("#Nportas").append("<option value='Nportas'></option>");
                    }
 
 
                })
 
 
 
 
            })
 
 
 
 
        })
    </script>
 
 
 
 
 
    </html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito