How do I scroll through the Select list

Asked

Viewed 673 times

-1

    <script>
    function check(){
        var verificaInput = document.querySelector("#cidade").value;
        var reg = /^[0-9]{4}$/;
        
        console.log(reg.exec(verificaInput))
        console.log(reg.test(verificaInput))

    }

        
    function changecidades(){
        var selectedoption = document.getELementById(optionvalue)
        console.log(changecidades())
        for(i = 0, i < selectedoption, i++){
        

            }
    }

    </script>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
</head>
<body>
    <label>
    <select id="optionvalue" onchange="changecidades(this.value);">
            
            <option value= "0">São Paulo</option>
            
            
            
            <option value="1">Jundiaí</option>
            
            
            
            <option value="2">Casa Branca</option>
            
            
            
            <option value="3">Campinas</option>
            
            
            
            <option value="4">Sorocaba</option>
        
        
        </select>
        <br>
        <input type="number" name="agencia" id="cidade"/>
        <br>
        <input type="number" name="conta" id="id"/>
        <br>
        <input type="button" value="click to check" onclick="check(this.id)"/>
    </label>
    </body>
</html>

Hey, guys, good night! Please, as you would go through the select option and check a Regex of 2 numbers between 0-9 for each city, I stopped at the for.

Thank you.

javascript html regex

  • What do you mean "two-digit regex"? That means that the values can only have exactly two digits, or it is at most two?

1 answer

0

You can go through the element option of your select and make an iteration in it using, for example, the repetition loop for.

It has multiple attributes such as value or text.

value takes tag value <option value"">
The text takes the Mytext:<option value"">MyText</option>

//O seu select:
var selectedoption = document.getElementById("optionvalue");
//As opções do seu select. Isto aqui é uma coleção:
var options = selectedoption.options;



function check(){
        var verificaInput = document.querySelector("#cidade").value;
        //Tá okay
        var reg = /^[0-9]{4}$/;
        
        if(reg.exec(verificaInput)!==null){
          //Se for igual a true
          if(reg.test(verificaInput)){
            //Seu código aqui
            console.log("Passou");
          }
        }
        else{
          alert("Algum código");
        }
        
    }

        
    function changecidades(){
        var selectedoption = document.getElementById("optionvalue");
        //A coleção de option do seu select
        var options = selectedoption.options;
        //options.length: pega a quantidade
       for(var i = 0; i < options.length;i++){
          console.log(options[i].value);
        }
        
    }
    
    //Usando JQUERY:
    $("#optionvalue").change(function(){
    //
       changecidades();
    });
 
 //Seu botão check
    document.getElementById("buttonCheck").onclick = function(){
        check();
    }
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    
</head>
<body>
    <label>
    <select id="optionvalue">
            <option value="">Selecione...</option>
            <option value= "0">São Paulo</option>
            
            <option value="1">Jundiaí</option>
            
            <option value="2">Casa Branca</option>
            
            <option value="3">Campinas</option>
            
            <option value="4">Sorocaba</option>
        
        </select>
        <br>
        <input type="number" name="agencia" id="cidade"/>
        <br>
        <input type="number" name="conta" id="id"/>
        <br>
        <input type="button" id="buttonCheck" value="click to check"/>
    </label>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </body>
</html>

REFERENCES:

  1. https://www.w3schools.com/jsref/coll_select_options.asp
  2. https://www.w3schools.com/jsref/dom_obj_option.asp
  3. https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option

Browser other questions tagged javascript html regex

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