At last...!!!! My solution:
[%# formReference.ttml %]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<TITLE>Please select your option</TITLE>
<STYLE type="text/css">
select{display:inline-block;}
div{text-align:center; border:1px solid gray;}
</STYLE>
</head>
</head>
<body>
<form>
<input type="hidden" id="preUrl" value="[% pre %]">
<input type="hidden" id="postUrl" value="[% post %]">
<div>
<select name="url" id="url" onchange="update();">
[% FOREACH url IN urls -%]
<option value="[% url.value %]">[% url.key %]</option>
[% END -%]
</select>
<p id="p"></p>
</div>
<script type="text/javascript" charset="UTF-8">
function update() {
var select = document.getElementById('url');
var option = select.options[select.selectedIndex];
var preUrl = document.getElementById('preUrl').value;
var postUrl = document.getElementById('postUrl').value;
var newUrl = preUrl + encodeURI(option.value) + "&transient
+name=" + option.text + postUrl;
document.getElementById("p").textContent = "Reference selec
+ted: " + option.text;
try {
var newWindow = window.open("", '_blank', 'toolbar=0,loc
+ation=0,menubar=0');
newWindow.location.href = newUrl;
} catch(ex) {
document.getElementById('value').value = ex;
}
}
update();
</script>
</form>
</body>
</html>
Thanks all for your valuable help. I appreciate it.