Menu
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>
316
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.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
