CODEWITHSUNDEEP
javascripthtml
Pumpkin
Pumpkin

Reputation: 2033

javascript, changing page content

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 ?

Upvotes: 0

Views: 650

Answers (5)

Pumpkin
Pumpkin

Reputation: 2033

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>

Upvotes: 1

Kerem
Kerem

Reputation: 11576

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/

Upvotes: 0

Lemex
Lemex

Reputation: 3794

Heres a working example: (of your code)

http://jsfiddle.net/44fQX/

Any problems just ask :)

Upvotes: 0

Billy Moon
Billy Moon

Reputation: 58531

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();">

Upvotes: 0

Jonathan Chow
Jonathan Chow

Reputation: 703

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.

Upvotes: 0

Related Questions