display:none - other options

I have in my form a listbox, encapsulated within a span, which i want to hide but i also want the listbox to be generated because i have a javascript code which reads the options inside that listbox and display the values as a string.

When i use

<span style="display:none">listbox code </span>

I notice that my js code reading the contents of the listbox does not work. I also read the following on the w3school display:none: the element will generate no box at all.

Is there a way of hiding the span while generating the listbox??

In fact i want the listbox to act as a hidden field and thought about hiding it using the display function

Thanks for any suggestion provided.

Code added:

 <span s开发者_运维技巧tyle="display:hidden">
    <select size=5 id="submission_person_ids" name="submission[person_ids][]"  onfocus="displayPersons();"> </select>
  </span>

If you don't intend to show an input, you should use a <input type="hidden"> instead and manipulate it's value.

Inputs which are hidden with display:none, or inside a hidden container, will be parsed into the DOM, but will not be submitted, which I assume is the source of your confusion.

You will need to use

visibility:hidden;

but this will leave space of the exact dimensions of the input put making wierd spaces. To overcome that. You will need to style your elements as position:absolute to the parent and z-index it and set the width and heights for cross browser compatibility.

Display:none is like the browsers does not render it anywhere virtually. When you call display:block..etc it actually renders in the browsers and computes all the new styles.

But like @Gerry said

use <input type="hidden">

if you want to hide some variables on the page- Then using jquery and the .show() you can access data from the hidden inputs and populate the displayed element