Repeat of select

Asked

Viewed 46 times

1

I am creating a form and in the source field, the user must choose one of the 5 available destinations. When it selects, the target field should open another 4 options with the available destinations for the source (which should be all other, except the source), which were entered through Javascript.

The first time the source is selected, the destination appears without problems, but if the user changes the source or destination, the options of the destination are repeated -including it is possible to select the same destination -, and this happens every time that the source or destination are changed. How to avoid this repetition?

Follows the code:

    <html>
<head>
    <title> Agência de Viagens </title>
    <script type="text/javascript">
        function funcorigem()
    {
    origem=window.document.ftaxi.origem.value;
    destino=window.document.ftaxi.destino;  
        if(origem=="rj")
        {
                option=document.createElement("option");
                option.text=" ";
                destino.add(option);
                option=document.createElement("option");
                option.text="São Paulo";
                destino.add(option);
                option=document.createElement("option");
                option.text="Belo Horizonte";
                destino.add(option);
                option=document.createElement("option");
                option.text="Salvador";
                destino.add(option);
                option=document.createElement("option");
                option.text="Santa Catarina";
                destino.add(option);

            }
    if(origem=="sp")
    {
                option=document.createElement("option");
                option.text=" ";
                destino.add(option);
                option=document.createElement("option");
                option.text="Rio de Janeiro";
                destino.add(option);
                option=document.createElement("option");
                option.text="Belo Horizonte";
                destino.add(option);
                option=document.createElement("option");
                option.text="Salvador";
                destino.add(option);
                option=document.createElement("option");
                option.text="Santa Catarina";
                destino.add(option);

    }
    if(origem=="bh")
    {
            option=document.createElement("option");
                option.text=" ";
                destino.add(option);
                option=document.createElement("option");
                option.text="Rio de Janeiro";
                destino.add(option);
                option=document.createElement("option");
                option.text="São Paulo";
                destino.add(option);
                option=document.createElement("option");
                option.text="Salvador";
                destino.add(option);
                option=document.createElement("option");
                option.text="Santa Catarina";
                destino.add(option);
    }
    if(origem=="sc")
    {

                option=document.createElement("option");
                option.text=" ";
                destino.add(option);
                option=document.createElement("option");
                option.text="Rio de Janeiro";
                destino.add(option);
                option=document.createElement("option");
                option.text="São Paulo";
                destino.add(option);
                option=document.createElement("option");
                option.text="Belo Horizonte";
                destino.add(option);
                option=document.createElement("option");
                option.text="Salvador";
                destino.add(option);
    }
if(origem=="salv")
    {

                option=document.createElement("option");
                option.text=" ";
                destino.add(option);
                option=document.createElement("option");
                option.text="Rio de Janeiro";
                destino.add(option);
                option=document.createElement("option");
                option.text="São Paulo";
                destino.add(option);
                option=document.createElement("option");
                option.text="Belo Horizonte";
                destino.add(option);
                option=document.createElement("option");
                option.text="Santa Catarina";
                destino.add(option);
    }
}
</script>
</head>
<body>
<form name="ftaxi">
Origem: &nbsp;<select name="origem" onchange="funcorigem()">
<option value=" "> Escolha </option>
<option value="rj"> Rio de Janeiro </option>
<option value="sp"> São Paulo </option>
<option value="bh"> Belo Horizonte </option>
<option value="sc"> Santa Cantarina </option> 
<option value="salv"> Salvador </option> &nbsp;&nbsp;&nbsp;
</select><p>
Data:&nbsp;<input type="date" name="data">&nbsp;&nbsp; <p>
Hora: &nbsp;<input type="text" size="8" maxlength="7"><p>
Destino:&nbsp;<select name="destino" onchange="funcorigem()"></select>
</form>
</body>
</html>

I’m sorry if something like this has been asked before, but I couldn’t find any topic that could help me. I thank you in advance.

javascript

1 answer

1


You should empty select before adding new options to avoid repetition.

Place destino.innerHTML = ''; after the line destino=window.document.ftaxi.destino;:

function funcorigem(){
   origem=window.document.ftaxi.origem.value;
   destino=window.document.ftaxi.destino; 
   destino.innerHTML = ''; // esvazia o elemento
   // resto do código

  • I tried. The options don’t repeat anymore, but I had another problem: I can’t select them. Even if I click to choose one, the destination field is not filled with the selected one, continuing blank.

  • This happens because of the onchange="funcorigem()" in the select of the destination. Remove it.

  • Thanks so much for your help!

Browser other questions tagged javascript

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