Change value of hidden field didn't work - [Solved]
<p>A simple question with (i assumed) a simple solution, but why <em>won't</em> the following (stripped down version with the lines that matters) work:</p>

<p><b>EDIT:</b>
I edited my example code a bit so it maybe makes it more clear why it has the error</p>

<p>I'm still doubting about the code because it seems ugly and there's a lot of unuseful stuff in there, but i didn't get to the optimization phase</p>

<p>HTML:</p>

<pre><code>   &lt;div class="select-container"&gt;
   &lt;input type="hidden" name="enroll-persons-field" id="enroll-persons-field"&gt;
   &lt;select size="1" name="enroll-persons" id="enroll-persons" class="form-options" tabindex="7"&gt;
   &lt;option value=""&gt;&lt;/option&gt;
      &lt;optgroup label="Ik boek voor"&gt;
         &lt;option value="1" selected&gt;1 persoon&amp;lt;/option&gt;
         &lt;option value="2"&gt;2 personen&amp;lt;/option&gt;
         &lt;option value="3"&gt;3 personen&amp;lt;/option&gt;
         &lt;option value="4"&gt;4 personen&amp;lt;/option&gt;
         &lt;option value="5"&gt;5 personen&amp;lt;/option&gt;
         &lt;option value="more"&gt;meer dan 5 personen&amp;lt;/option&gt;
      &lt;/optgroup&gt;
   &lt;select&gt;
&lt;div&gt;

[..]

&lt;input type="text" name="enroll-address" id="enroll-address" class="default-input-style" placeholder="Je adres" tabindex="10" required&gt;
</code></pre>

<p>Now I'm replacing the select list via jQuery to style the option list. I can imagine its an ugly approach but so far it works</p>

<pre><code>$(".select-container").after("&amp;lt;div class='select-list-container'&gt;&amp;lt;/div&gt;");
$(".select-list-container").append("&amp;lt;ul id='select-option-list'&gt;");
$(".form-options option").each(function(){
   li = '&amp;lt;li id="'+$(this).val()+'"&gt;'+$(this).attr('text')+'&amp;lt;/li&gt;';
   $("#select-option-list").append(li);
});
$(".select-list-container").append("&amp;lt;/ul&gt;");
$(".form-options").hide();
$(".select-container").text($(".form-options option:last").attr('text')).click(function(){
   $(".select-list-container").toggle("fast");
});
$("#select-option-list li").live("click", function(){
   $(".select-container").text($(this).text());
   $(".select-list-container").toggle("fast");
   $("#enroll-persons-field").val($(this).attr("id"));
});
</code></pre>

<p>Hope this description will help</p>

<p>The <code>alert()</code> gives <code>undefined</code> as a result and <code>$(this).attr('id')</code> is a legit value.  I tested it :)</p>

<p><b>EDIT2:</b>
Solved it by placing the hidden input field outside the <code>select-container div</code></p>

<p>Thanks everybody for the help!</p>
