using href links inside option tag
UPDATE 2022: This answer is fine but really in 2022 we shouldn't be doing this anymore!
UPDATE (May 2020): Someone asked in the comments why I wouldn't advocate this solution. I guess it's a question of semantics. I'd rather my users navigate using <a>
and kept <select>
for making form selections because HTML elements have semantic meeting and they have a purpose, anchors
take you places, <select>
are for picking things from lists.
Consider, if you are viewing a page with a non-traditional browser (a non graphical browser or screen reader or the page is accessed programmatically, or JavaScript is disabled) what then is the "meaning" or the "intent" of this <select>
you have used for navigation? It is saying "please pick a page name" and not a lot else, certainly nothing about navigating. The easy response to this is well i know that my users will be using IE or whatever so shrug
but this kinda misses the point of semantic importance.
Whereas a funky drop-down UI element made of suitable layout elements (and some js) containing some regular anchors still retains it intent even if the layout element is lost, "these are a bunch of links, select one and we will navigate there".
Here is an article on the misuse and abuse of <select>
.
ORIGINAL ANSWER
<select name="forma" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
UPDATE (Nov 2015): In this day and age if you want to have a drop menu there are plenty of arguably better ways to implement one. This answer is a direct answer to a direct question, but I don't advocate this method for public facing web sites.
using href links inside option tag to link to url
Try this
<select id="cd-dropdown" name="cd-dropdown" class="cd-select">
<option value="-1" selected>choose an option to test</option>
<option value="1" class="icon-monkey">Students</option>
<option value="2" class="icon-bear">Courses</option>
<option value="3" class="icon-squirrel">Instructors</option>
<option value="4" class="icon-elephant">Departments</option>
</select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery('#cd-dropdown').on('change', function(){
if(jQuery(this).val() == 1){
window.location.href = 'http://google.com'
}
// and so on
})
</script>
You have to give the destination URL for all options jQuery code.
Using href links inside option tag with jQuery in the way
Use the $('select').change()
event :
$('select[name="dropdown-menu"]').change( function(){
if ( $(this).val() == 1 ){
//'this' refers to your select
//insert your code to get the selected url,
//and call "window.location.href = url"
}
});
Link inside option tag
<select class="my-select col s12">
<option *ngFor="let c of campanhas" [routerLink]="['/disputas',c.id]">{{c.cliente_nome}}</option>
</select>
or try below code
<select class="my-select col s12" #select (change)="Navigate(select.value)">
<option *ngFor="let c of campanhas" [routerLink]="['/disputas',c.id]" value='c.id'>{{c.cliente_nome}}</option>
</select>
Component.ts
Navigate(value)
{
this.router.Navigate(['/disputas',value]);
}
How to link option tags to other pages in html?
First, are you trying to use a drop-down box or a list?
For a drop-down, as mentioned in this question, you can do the following with JavaScript. Use the onChange
event to specify what to do when the value of the selection box is changed. Then use window.location
to tell the browser to navigate to a specific page.
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
For a list, simply change your syntax a bit. Use a unordered list and then style it to your liking.
<ul>
<li><a href="www.google.com"">A</a></li>
<li><a href="www.aol.com">B</a></li>
</ul>
Send user to link by choosing a select option
Since you're using Bootstrap you can use jQuery syntax (it's included with Bootstrap as a dependency).
Your <select>
control is perhaps not configured optimally. First, the <option>
elements should be like this:
<option value="photos">photos</option> <==== value, not id
Also, your javascript/jQuery will be easiest if you give the select element an id:
<select id="mySel" class="form-control">
In your javascript file (or in a <script></script>
block in your HTML head or body):
$('#mySel').change(function(){ <=== #mySel must match the id of the <select>
sel = $(this).val();
if (sel == 'photos'){
window.location.href = 'http://example.com/photos.php';
} else if (sel == 'books'){ {
window.location.href = 'books.html';
}
});
By the way, you don't need a "form" for what you are doing. Bootstrap uses the term form-control
as a class name... that is confusing since the class has pretty much nothing to do with forms (Bootstrap devs probably named it such while they were making form input fields look pretty - but that class just makes input fields look pretty. It can be used anytime, whether in a form construct or not.)
Indeed, the only time you need a form is if you wish to collect data from users and then send that data to another page for processing. But in this day and age, there is no need to ever use forms since AJAX is just as easy and doesn't refresh or navigate away from the current page.
On the other hand... I assumed above that you want the user to visit the link immediately upon choose from the select control. IF, otoh, you want them to be sent there after submitting a form, here's how that would work.
The <form></form>
structure surrounds a number of HTML elements that get turned into key/value pairs (i.e. variableName + userEnteredData). Here's how that works.
When the form is submitted, the receiving side gets these key/value pairs from: (a) the name=""
attribute from each HTML element, and (b) the data the user entered into each element. They are paired-up, turned into VariableName + VariableContents
(with the variableName being whatever was typed into the name=""
attribute of that element.
The "receiving side" is defined by whatever gets typed into the action=""
attribute on the <form>
tag. E.g.:
<form action="otherside.php" method="post">
If there is no action=""
attribute, then the form data is posted back to the same file it started from - so you typically need some PHP code at the top of this file (index.php?) to decide if there is data coming in or not.
Anyway, it is in the receiving side that you would receive the key/value pair of the <select>
control matched with the value of what the user selected, and you would need code to read what that value is and then redirect the user to the desired location. In php, the command to use would be header()
.
unable to trigger flask view function using href inside a tag inside select
<select class="js-select2 partner_list" id="partner_option" name="partner_list_select" onchange="myFunction()">
<option value = "choose">Choose an option</option>
<option value = "active_partner"><a href="{{url_for('active_partners')}}">Active Partners</a></option>
<option value = "filter_partner">Filter/Edit Partner</option>
<option value = "add_new_partner">New Partner</option>
</select>
using href links inside option tag wouldn't work for links
!
Had to use ul
and li
instead for links
<header id="header">
<ul class="links" style="--items: 3;">
<li class="active" style="list-style-type:none"><a href="{{url_for('active_partners')}}">Active Partner</a></li>
<li style="list-style-type:none"><a href="#">Filter/Edit Partner</a></li>
<li style="list-style-type:none"><a href="#">New Partner</a></li>
<span class="line"></span>
</ul>
</header>
Related Topics
Is It Necessary to Write Head, Body and HTML Tags
With Css, Use "..." For Overflowed Block of Multi-Lines
How to Create Your Own HTML Tag in Html5
Why Does Position:Relative; Appear to Change the Z-Index
How to Add an HTML Link in the Body of a Mailto Link
Css Content Generation Before or After 'Input' Elements
Html/Css Triangle With Pseudo Elements
Using Position Relative/Absolute Within a Td
What Is Sr-Only in Bootstrap 3
How to Add a Custom Attribute to an HTML Tag
How to Replicate Background-Attachment Fixed on Ios
What Is the Correct Value For the Disabled Attribute
Css :Selected Pseudo Class Similar to :Checked, But For ≪Option≫ Elements
Html Input="File" Accept Attribute File Type (Csv)
Remove White Space Above and Below Large Text in an Inline-Block Element