Put a url inside select option

Asked

Viewed 4,103 times

-1

How to put a url within the option of a select? When the user selects the select option it would already redirect to url within the option.

The way I tried the url is concatenated with the previous one and the link gets broken.

html script

  • You want to open a new page according to the option that the guy select from a select?

  • yes but in my case here will be 3 different select with various options calling various pages going and returning between them

  • They are internal pages within the same system Ex: each parent option changes the child select option and child option changes the select grandson type options so

  • Put an example of what you’ve done to make your need more clear...

3 answers

1

Do it this way:

<select id="link">
   <option value="" selected>Escolha o site</option>
   <option value="http://www.google.com">Google</option>
   <option value="http://www.youtube.com">YouTube</option>
   <option value="/">Stack</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
 $(document).ready(function(){

    $('#link').on('change', function () {
         var url = $(this).val(); 
         if (url) { 
             window.open(url, '_blank');
          }
          return false;
        });
     });
</script>
  • 1

    Consider adding an alternative with javascript. User did not mention using jQuery

1

Simple method:

<select onchange="location.href=this.value">
 <option value="#">Selecione</option>
 <option value="http://www.botafogo.com.br">Botafogo</option>
 <option value="http://www.flamengo.com.br">Flamengo</option>
 <option value="http://www.fluminense.com.br">Fluminense</option>
 <option value="http://www.vasco.com.br">Vasco da Gama</option>
</select>

0

To put the link within a single option do as follows:

<script type="text/javascript">
function changeFunc($i) {
    if ($i == 'nova'){
        window.open('index.php?pg=cadastrar_categoria','_self');
    }
}
</script>

<select id="link"  onchange="changeFunc(value);">
   <option value="" >Escolha a categoria</option>
   <option value="animais">Animais</option>
   <option value="natureza">Natureza</option>
   <option value="nova">Adicionar nova categoria</option>
</select>

Browser other questions tagged html script

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