3

I have two select drop down menus. When I select from the first dropdown, then entries in the second dropdown should change. This functionality is working fine in browser, but not in HTA (HTML application)

My Code

<html>
<head>
<script language="javascript">
function change()
{
     var sel=document.getElementById("second")
     var val=document.getElementById("first").value
     if(val=="1")
     {
         sel.innerHTML="<option>a</option><option>b</option>  <option>c</option>"
     }
     else if(val=="2")
     {
          sel.innerHTML="<option>x</option><option>y</option><option>z</option>"
     }
 }  

</script>
</head>
<body>
 <div>
  <select id="first" onchange="change()">
  <option>1</option>
  <option>2</option>
  </select >

<select id="second">
   <option>a</option>
   <option>b</option>
   <option>c</option>
  </select>
 </div>
Teemu
  • 22,918
  • 7
  • 53
  • 106
user2095748
  • 267
  • 1
  • 5
  • 15

1 Answers1

2

Looks like you're running the app in Quirks-mode. If that's the case, select element value is never set.

You've to either use a document mode of IE9 or later (set HTML5 DTD and <meta http-equiv="x-ua-compatible" content="ie=edge" /> for example), or use selectedIndex property to get the value of select element:

var val = sel[sel.selectedIndex].value;

The latter is the only option, if you're running the app with IE<9.

Another problem is setting innerHTML of select element. That won't work in IE<10. To fix this, you need to create all the needed options in the script, please see select element.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • 1
    I am opening HTA with Microsoft HTML Application Host – user2095748 Sep 15 '15 at 05:39
  • 3
    Yes, I know, but IE offers the JS and rendering engines for mshta.exe. Please see [Javascript version in HTA](http://stackoverflow.com/a/19570684/1169519) for further information. – Teemu Sep 15 '15 at 05:42