chrome，firefox和Internet Explorer中的Ajax和html事件

Question

I have many select elements in a cart, when a select element changes option , a onclick event will be listened to , and an ajax function displayCart will execute.

<select name="price">
<option value="peryear" onclick="dispCart('y',2,1100);">1100 Dollar/year</option>
<option value="pertrimester" onclick="dispCart('t',2,300);" selected>300 Dollar/3 months</option>
   <option value="permonth" onclick="dispCart('m',2,120);">120 Dollar/month</option>
</select>

this is the ajax function:

function dispCart(b,c,price){
   var req1=new getXHR();
   var altr=Math.random();
   var url="cart.php?c="+altr+"&b="+b+"&c="+c+"&price="+price;
   req1.open('GET',url,true);
   req1.onreadystatechange=function(){
   if(req1.readyState==4){
     if(req1.status==200){
        document.getElementById("cart").innerHTML=req1.responseText;
   }
   }
   };
req1.send(null);
}

The cart.php is a controller , which connects using some functions to connect to the database , change the cart data ( for example from paiement per month to paiement per year) then refreshes the cart and displays the new cart with the changes .

the problem is that this cart works great with FF, but with IE and chrome it doesn't execute the dispCart javascript function.

I don't know why???

thank you in advance.

Answer 1

In IE you cannot bind events on the <option> element. You should bind the event to the <select> element and then find out which option is selected.

Here is an example using onchange .

Answer 2

使用onchange作为select ，而不是onclick作为option 。