I'm trying to do an example in which I use javascript to change a page content. Suppose I have a page as :
<html>
<head>
</head>
<body>
<select id="a96780" multiple="multiple" name="a96780" size="3" value="deneme">
<option selected="selected" value="#ANY">ALL</option>
<option value="1111294">Ex1</option>
<option value="1111292">Ex2</option>
<option value="1111290">Ex3</option>
</select>
</body>
</html>
I would like to be able to close all the options, Ex1, Ex2, Ex3 (set their type's to hidden or by other means) when the page loads. In order to achieve this I followed the instructions online however failed to do so by doing:
<script type="text/javascript">
function myFunction()
{
var selectBox = document.getElementById("a96780");
alert("smt");
alert(selectBox.name);
}
myFunction();
</script>
In the script above, I'm trying to print out the name of the element to confirm that I actually have a hold of it. Last line however is never printed. How can I comfirm that I have a initialized the element as selectBox and how should I proceed from there. Would the option values be enough to refer to the items: "Ex1, Ex2 and Ex3" ?
edit 1 : I have absolutely no link to the html, I can not modify the body tag nor can put any buttons that can start myFunction thereby whatever I do, I must do it by js only. Besides this it would also be wonderful if you can lead me regarding how I should proceed. For instance can I refer to the option items from their values ?
5 Answers 5
My solution was :
<html>
<head>
<script type="text/javascript">
function initialTypeCorrection()
{
var selectBox = document.getElementById("a96780");
if(selectBox != null)
{
var options = selectBox.getElementsByTagName("option");
for (var i = 0; i < options.length; i ++)
{
// Alternative 1
if(options[i].value=="1111294" || options[i].value=="1111292" || options[i].value=="1111290")
{
options[i].disabled = "true";
options[i].text = "";
}
}
}
}
window.onload = initialTypeCorrection;
</script>
</head>
<body>
<select id="a96780" multiple="multiple" name="a96780" size="4">
<option selected="selected" value="#ANY">all</option>
<option value="1111294">a1</option>
<option value="1111292">a2</option>
<option value="1111290">a3</option>
</select>
</body>
</html>
Comments
you might want to try
<body onload="myFunction()">
instead of calling it in the script tag, because the stuff in body tag are not initialized when the javascript was.
Comments
You need to wait until the DOM has fully loaded. This means that the HTML has been understood, and organised by the browser. If you execute the javascript before then, the elements won't exist, so are not manipulated or printed.
One way to wait for the DOM to load is by putting the function call into onload of the body tag...
<body onload="myFunction();">
Comments
2 Comments
Regarging this part of your question: "I would like to be able to close all the options, Ex1, Ex2, Ex3 (set their type's to hidden or by other means) when the page loads"
function closeAllOptions() {
var slc = document.getElementById("a96780"), i, opt;
for (i=0; opt=slc[i]; i++) {
if (opt.value!="#ANY") {
opt.disabled=true;
// update
opt.style.display="none";
}
}
}
function relaseAllOptions() {
var slc = document.getElementById("a96780"), i, opt;
for (i=0; opt=slc[i]; i++) {
opt.disabled=false;
// update
opt.style.display="";
}
}
Test: http://jsfiddle.net/44fQX/1/
UPDATE http://jsfiddle.net/44fQX/3/