Hi guys!
Please help me. I am doing a html web site. I wrote a "SELECT" component in that.
The required functionality is when we go to that Select component and choose its option, then it has to change the content in a particular div.
You can see it on the below image also.
I wrote the select component in html like this :
<select name="select" id="add" onchange="change_address()">
<option selected="selected">San Jose CA</option>
<option>Vallejo CA</option>
</select>
And I wrote the function in javascript like this :
<script language="javascript">
   function change_address() {
      if (document.getElementById('add').value == "San Jose CA") {
         var x = "<div class='style1' align='right'>1705 Branham Lane #B4<br>San Jose CA 95118</div>";
            x+= "<div class='style2' align='right'>(408) 264-7630</div>";
         document.getElementById('display').innerHTML = x;
         }
        Â
      if (document.getElementById('add').value == "Vallejo CA") {
         var y = "<div class='style1' align='right'>480 Redwood Street #13<br>Vallejo CA 94590</div>";
            y+= "<div class='style2' align='right'>(707) 554-2600</div>";
         document.getElementById('display').innerHTML = y;
         }
   }
</script>
It is working properly on Firefox. But it is not working on IE browser.
Anybody know how to solve this, please help me.
Â
Hi Austin,
Â
<select name="select" id="add" onchange="change_address()">
<option selected="selected">San Jose CA</option>
<option>Vallejo CA</option>
</select>
<script language="javascript">
   function change_address() {
      if (document.getElementById('add').value == "San Jose CA") {
         var x = "<div class='style1' align='right'>1705 Branham Lane #B4<br>San Jose CA 95118</div>";
            x+= "<div class='style2' align='right'>(408) 264-7630</div>";
         document.getElementById('display').innerHTML = x;
         }
        Â
      if (document.getElementById('add').value == "Vallejo CA") {
         var y = "<div class='style1' align='right'>480 Redwood Street #13<br>Vallejo CA 94590</div>";
            y+= "<div class='style2' align='right'>(707) 554-2600</div>";
         document.getElementById('display').innerHTML = y;
         }
   }
</script>
Â
Â
First of all I would like to congrats you because for good work. This is really great. And this is working properly. Will my suggestion about on your problem. Recheck your application because as you can see for me this is working properly. Or maybe there is issue about the compatibility in your coding with your system. Review the connection about your IE browser sometimes it happened. Good luck about this and happy coding. Thanks,Â
Hello Edwin,
The component can be able to work in Firefox and not in internet explorer because it needs a certain script that will make it compatible with both browsers. Try the following workarounds:
Method 1:
In case you are parsing xml using jquery, and you need html() in IE, you will need to try the following:
var content = ($.browser.msie) ? $(this).context.xml : $(this).html();
Method 2:
You will need to test on IE7 – IE9 as well as Chrome if you have it. What needs to be done for IE is to use a DIV wrapper in the menu.
Regards,
Carl
