I have added onfocus and onclick to select and written java script function as shown below. using velocity i.e., .vm files to invoke javascript function.

    <script type="text/javascript">
                function fixA(val){
                    alert(val);                              
                   // document.getElementById(val).style.zIndex="100";
                   val.style.zIndex=300;
                }
                function fixB(val){
                    alert(val);                               
                   // document.getElementById(val).style.zIndex="300";
                      val.style.zIndex=300;
                }

            </script>


#elseif ( $el.type.code == "listbox" )
#if( $errorFields.contains($name) )
    <div class="label selectbox big error"> 
#else
    <div class="label selectbox big" >
#end
    #if ($el.label)
        #if ($el.mandatory)
            <label class="label_content" for="$name">$el.label *</label>
        #else
            <label class="label_content" for="$name">$el.label</label>
        #end
    #end
    <select class="select_styled" id="$name" name="$name" onfocus="fixA($name)" onclick="fixB($name)" >
        #foreach($val in $el.values)
            #set ($sel = "")
            #if ($allInputFields.get($name) == $val)
                #set ($sel = ' selected="selected"')
            #end
            <option$sel onclick="resetIndex()">$val</option>
        #end
    </select>
    <div class="clr">
    </div>
</div>

1)I am using IE7 and it is not working, it is working fine in FF.

2) alert(val) gives value of [object HTMLSelectElement], but alert( document.getElementById(val)); gives null. how can i solve it?

I have added onfocus and onclick to select and written java script function as shown below. using velocity i.e., .vm files to invoke javascript function.

    <script type="text/javascript">
                function fixA(val){
                    alert(val);                              
                   // document.getElementById(val).style.zIndex="100";
                   val.style.zIndex=300;
                }
                function fixB(val){
                    alert(val);                               
                   // document.getElementById(val).style.zIndex="300";
                      val.style.zIndex=300;
                }

            </script>


#elseif ( $el.type.code == "listbox" )
#if( $errorFields.contains($name) )
    <div class="label selectbox big error"> 
#else
    <div class="label selectbox big" >
#end
    #if ($el.label)
        #if ($el.mandatory)
            <label class="label_content" for="$name">$el.label *</label>
        #else
            <label class="label_content" for="$name">$el.label</label>
        #end
    #end
    <select class="select_styled" id="$name" name="$name" onfocus="fixA($name)" onclick="fixB($name)" >
        #foreach($val in $el.values)
            #set ($sel = "")
            #if ($allInputFields.get($name) == $val)
                #set ($sel = ' selected="selected"')
            #end
            <option$sel onclick="resetIndex()">$val</option>
        #end
    </select>
    <div class="clr">
    </div>
</div>

1)I am using IE7 and it is not working, it is working fine in FF.

2) alert(val) gives value of [object HTMLSelectElement], but alert( document.getElementById(val)); gives null. how can i solve it?

• javascript
• velocity

4 Answers 4

Main mistake You need to quote the name fixA('$name')

Better to pass this: onfocus="fixA(this)"

function fixA(sel){
  sel.style.zIndex=100; // int, not a string
}

Seems you are barking up the wrong tree.

The plugin rewrites the DOM into a set of divs

And the jQuery selectbox plugin you use is supposed to do just what you are trying to achieve and is failing for some IE7 specific reason: $container.css("z-index", "10000");

variable s is not an ID, it is already a reference to an element.

Without the quotes, it's passing an object named $name, not the string "$name". That'll be null or undefined.

Quote "$name" in your onclick with single quotes: onclick="fixA('$name')"

Change it like so:

<select class="select_styled" id="$name" name="$name" 
        onfocus="fixA('$name')" onclick="fixB('$name')">