CODEWITHSUNDEEP
htmldrop-down-menu
lisovaccaro
lisovaccaro

Reputation: 33956

SELECT Dropdown that redirects without Javascript

Is it possible to create a dropdown that redirects the user when he selects an option without javascript?

When the user selects a category in dropdown A, I display dropdown B (which has subcategories) with Javascript. I want to make it work similarly for users without Javascript. My idea is to redirect users to different pages when they choose an option in the first dropdown.

Is this possible without javascript? How can it be done? (if not if possible suggest something)

Upvotes: 4

Views: 3117

Answers (2)

Indy
Indy

Reputation: 363

While admittedly not elegant, I've come to this solution;

<form action="/" method="GET">
    <select name="path">
        <option value="home">Home</option>
        <option value="services">Our services</option>
        <option value="portfolio">Portfolio</option>
    </select>

    <input id="fallback-go" type="submit" value="Go" />
</form>

Selecting ``Our Services'' then clicking Go would result in them being sent to /?path=services

Unfortunately, I can't fathom a way to do it automatically on select change, I'll post a reply if I do.

In order to hide the Go button from users with JavaScript support, this could be implemented;

<head>
    <style>
        #fallback-go { display: none; }
        .no-script #fallback-go { display: block; }
    </style>
</head>

<body class="no-script">
    <script>document.body.classname = '';</script>

    [ other HTML ]
</body>

As for your double-layered dropdown menu; this is possible using a pure CSS solution. The problem with a pure CSS solution is it wouldn't play nicely with IE7, due to it's lack of pseudo-element support.

If you want all-around support, I'd recommend to implement the JavaScript solution to keep IE7 up-to-par, and a pure CSS solution to keep noscript happy.

As a noscript user, I appreciate your efforts greatly.

Upvotes: 2

Hidde
Hidde

Reputation: 11931

No. The most minimalistic solution is using inline JS in the HTML.

Note: which kind of browser do you want to support? Even IE7 has the JS support you need.

Upvotes: 0

Related Questions