ansaurus

Question

Answer 1

+1 A:

It is better to use onchange event on the select box. Onclick doesn't work well in all browsers. Bind a javascript function to the onchange event that changes the url of the a element (or redirect to the correct url if you want to change it instantly).

Something like this should work. I recomment using a javascript libary like jquery if you want to do more interactive client side functionality

changeLanguage()

<select onchange="changeLanguage(this.value)">
    <option value="Choose" selected="selected">Choose</option>
    <option value="IT" >Italian</option>
    <option value="FR" >France</option>
</select>

<a id="url" href="?action=IT">IT</a>

Javascript:

function changeLanguage(language) {
    var element = document.getElementById("url");
    element.value = language;
    element.innerHTML = language;
}

Update:

Code I used for my test. This works in the most recent versions of chrome, firefox and ie.

<html>
<head>
 <script>
  function changeLanguage(language) {
   var element = document.getElementById("url");
   element.value = language;
   element.innerHTML = language;
  }
 </script>
</head>
<body>
<select onchange="changeLanguage(this.value)">
    <option value="Choose" selected="selected">Choose</option>
    <option value="IT" >Italian</option>
    <option value="FR" >France</option>
</select>

<a id="url" href="?action=IT">IT</a>
</body>
</html>

Mark Baijens 2010-09-13 14:07:17

Hi Mark, thanks for your reply..I have tried the code and I am receiving and error :/

Rene Zammit 2010-09-13 14:53:00

What error did you get?

Mark Baijens 2010-09-13 15:09:32

try it on IE and you will see the following error: null is null or not an object

Rene Zammit 2010-09-14 06:52:48

Strange, it works fine for me in IE 8. As far as i know this functionality should be compatible with older versions of ie aswell. You could try to rewrite this functionality with jQuery. This is a great javascript libary that avoids a lot of browser compatibility problems. Putting javascript in a external js file can help aswell or escape it with <![CDATA[ (code) ]]> tags for old browsers.

Mark Baijens 2010-09-14 12:23:12

ansaurus

tags:

views:

answers:

problem: onclick event in dropdown

related questions