Help in select tag in for html...

Question

<select onchange ="----">
 <option value="a">a</option>
 <option value="b">b</option>
 <option value="c">c</option>
</select>

I want to write this small piece of code wherien if a person selects any item, then it should move to the next html page showing what value is being selected..

How can i do that..

Hope my doubt is clear

Any suggestions here would be appreciated...

Thanks..

Answer 1

<select onchange="document.forms[0].submit();">

assuming it's the first form on the page (which it usually is). If not you can alter the index to the correct form.

A good reference is Introduction to Forms.

You can of course do it using a library like jQuery (my preferred option) but that is strictly optional as it can be done fairly easily with stock standard Javascript.

Answer 2

Are you looking for Javascript running on the user's browser, or some server-side solution? You only tagged this as "html" so it's not clear what programming language the "small piece of code" should be in...

Answer 3

The onChange attribute will accept a javascript expression or function. Therefore, it depends on exactly what you want to do. If you need the value of the dropdown in the same page, you can access it using a Javascript snippet.

If however, you want the value to be available on the subsequent page (to which the form action attribute points), then you will need to submit the form in the change event. In this case, you can something similar to what @Cletus has pointed out.

Answer 4

All form fields have a form property that you can use to easily access the form element to submit it.

You also need a name attribute in your select tag, or it will not work.

<select name="item" onchange="this.form.submit();">

Alternatively, you can go to another page by setting the location of the window, adding the value in the query string:

<select onchange="window.location.href='NextPage.html?item='+this.options[this.selectedIndex].value;">

Answer 5

<select onChange="redirect(this)">
<option value="html1.html" selected>1</option>
<option value="html2.html">2</option>
<option value="html3.html">3</option>
</select>

<script type="text/javascript">
function redirect(selSelectObject)
{
   if (selSelectObject.options[selSelectObject.selectedIndex].value != "")
   {
     location.href=selSelectObject.options[selSelectObject.selectedIndex].value
   }
}
</script>

I hope it will help you.

Answer 6

You could do inline Javascript using onchange in the select element ... but inline JS is a bad habit, and should be avoided. Markup, i.e. (X)HTML, should be minimal and semantic, without any inline CSS or Javascript. It's good to separate your markup (HTML) from your layout (CSS) and your behaviour (Javascript) as much as you can.

Keep your Javascript within the document head, or, even better, as an external script called in the head. This has advantages both in keeping your markup clean and minimal, and centralising and externalising your Javascript, which promotes code reuse and ease of maintenance.

A Javascript framework like jQuery will make things much simpler and more robust, too, if you're not experienced with Javascript.

Also, be aware that this approach (onchange on a select) is a poor one for accessibility (despite the fact that you see it everywhere on the web). For instance, many keyboard-only users (and that includes a whole lot of mobiles) are faced with the horrible situation where they choose a different option by moving up/down the list one option at a time... so your Javascript is kicked off over and over again, once for each option between the initial option and the newly desired one. Ugly - and if you're actually submitting the html form with the onchange JS, potentially a complete showstopper for those users.

Regardless, you really should have have a separate submit button (for users without Javascript, search bots etc) anyway; there might be some value in onchange JS triggering some Ajax, but don't rely on it to be the only way a user can submit the selection.

Answer 7

I would suggest that for cross-browser compatibility you think about combining the dropdown with a button to invoke the "go to" action. Some browsers, especially when used with accessibility technology, will fire an onchange for a select when that item is scrolled over. Having the onchange event itself do a postback in this scenario would be counterproductive. Even though the user experience may not be quite as nice, the select with a button degrades more gracefully both when the user does not have javascript and when the user is using accessibility technology. Were you loading the content via AJAX this would be less important since the select, presumably, would still be there to interact with. Doing a full postback to a different page, however, will frustrate users who experience this problem.