Question

I am trying to implement the jquery selectbox script. I have made all the changes needed to css and html markup and the selectbox is working and appearing fine. the problem is. It is not initializing automatically at page load.

I have to manually run $("SELECT").selectBox(); from the firebug script panel to make it work. I have tried everything from putting hte initializing command at the bottom of the page, and putting it in $(document).ready() as well. Nothing works. What am i missing?

EDIT: The code I am running involves dynamic select box generation from the server.

Answer 1

Did you initialize it before the select boxes? It has to be initialized before them. And make sure jQuery is loaded before you do anything jQuery. (duh)

For example:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.selectBox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").selectBox();
});
</script>

<select name="standard-dropdown">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3 has &lt;a&gt; really long label but it won't affect the control's display at all</option>
<option value="4">Item 4</option>
<option value="5" disabled="disabled">Item 5 (disabled)</option>
<option value="6">Item 6</option>
<option value="7">Item 7</option>
<option value="8">Item 8</option>
<option value="9">Item 9</option>
<option value="10">Item 10</option>
<option value="11">Item 11</option>
<option value="12">Item 12</option>
<option value="13">Item 13</option>
<option value="14">Item 14</option>
<option value="15" selected="selected">Item 15</option>
<option value="16">Item 16</option>
<option value="17">Item 17</option>
<option value="18">Item 18</option>
<option value="19">Item 19</option>
<option value="20">Item 20</option>
 </select>

Hope this helps.

P.S Maybe you could show us full code, or a link to where you’re having the issue?