Links in <Select> Dropdown Options

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.

How to display a list of links as a drop down select?

The WAI provides multiple examples of emulated listbox using role=listbox and role=option. This requires the use of aria-activedescendant and aria-selected for better accessibility support.

See Examples under section: 3.13 Listbox

For the styling, you can copy the style used by the user agent stylesheet.

That being said, it might a bad idea to style a list of links as a dropdown select as it could lead to an unpredictable change of context

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().

How can I have a link in my select options but not all should be a link

You could make an onchange event check the value when it is changed, and use the open function to redirect:

var cars = document.getElementById("cars")

cars.addEventListener("change", function() {
  if (cars.value == "addUser") {
    open("/add-user.php", "_self")
  }
})

<label for="cars">Assign to:</label>
<select id="cars" name="assignTo" required>
  <option value=""></option>
  <option value="Jey">Jey</option>
  <option value="Mike">Mike</option>
  <option value="Moses">Moses</option>
  <option value="Joe">Joe</option>
  <option value="addUser">Add new user</option>
</select>

Select Drop Down with only one option as a link

You can adapt solution from the Load page on selection from dropdown form

Replace JS code with

$(document).ready(function() {
    $("#selection").change(function() {
        var curVal = $("#selection option:selected").val();
        if (curVal.indexOf('http://') === 0) {
            location = $("#selection option:selected").val();
        }
    });
});

The idea is that you check the option value and if it begins with 'http://', then you set new location.

how do i add a link so that when i select an element in my dropdown menu i get redirected to thee page

You have to use like this

<a class="dropdown-item" href="{{url('')}}/posts/{{$posts->id}}">{{$posts->title}}</a>
           

---

Related Topics