Find labels of multiple select boxes with jQuery
<p>I have <a href="http://jsfiddle.net/XWr4W/1/" rel="nofollow">this script</a></p>

<p>I want to reach this html:</p>

<pre><code>City
 Paris
 Bern
Sex
 Male
 Female
</code></pre>

<p>But with my script, labels replace each other on change. How can I get above html?
Thanks in advance</p>

<p>Script:</p>

<pre><code>$("select").change(function () {
  var str = "";
  var id = $(this).attr('id');
  var label = '&lt;li&gt;&lt;b&gt;'+$("label[for='" + id + "']").text()+'&lt;/b&gt; &lt;/li&gt;';
  $("select option:selected").each(function () {
        str += '&lt;li&gt;'+$(this).text()+'&lt;/li&gt;';
      });
  $("ul").html(label + str);
})
.trigger('change');
</code></pre>

<p>HTML:</p>

<pre><code>&lt;label for="sex"&gt;sex&lt;/label&gt;
&lt;select id="sex" multiple="multiple"&gt;
    &lt;option&gt;Male&lt;/option&gt;
    &lt;option&gt;Female&lt;/option&gt;
&lt;/select&gt;
&lt;label for="city"&gt;City&lt;/label&gt;
&lt;select id="city" multiple="multiple"&gt;
    &lt;option&gt;Paris&lt;/option&gt;
    &lt;option&gt;Bern&lt;/option&gt;
&lt;/select&gt;
&lt;ul&gt;&lt;/ul&gt;
</code></pre>
