title: How to create multi selection on html 5 code, better using mobiscroll
body: <p>I Want to create a html multi-selec-list with 2 columns by using mobiscroll.
  And I write the code on rails with haml and js.</p>
  
  <p>The core rails code to haml is like this:</p>
  
  <pre><code>- grouped_options = [['week_1', [Mon, Tues, Wed, Thur, Fri, Sat, Sun]], ['week_2', [Mon, Tues, Wed, Thur, Fri, Sat, Sun], ['week_3', [Mon, Tues, Wed, Thur, Fri, Sat, Sun]]
  - week_day = 'Fri'
  =select_tag('weeks-weekday', grouped_options_for_select(grouped_options, week_day), :class=&gt;'li_option')
  </code></pre>
  
  <p>js code for mobiscroll is like this:</p>
  
  <pre><code>$('#weeks-weekday').mobiscroll().select({
    theme: 'bootstrap',
    display: 'bottom',
    mode: 'scroller',
    group: true,
    maxWidth: [$(document).width()/2,$(document).width()/2]
  });
  </code></pre>
  
  <p>html code for above is like this:</p>
  
  <pre><code>&lt;select id="weeks-weekday"&gt;
    &lt;optgroup label="week_1"&gt;       
        &lt;option value="Mon"&gt;Mon&lt;/option&gt;
        &lt;option value="Tues"&gt;Tues&lt;/option&gt;
        &lt;option value="Wed"&gt;Wed&lt;/option&gt;
        &lt;option value="Thur"&gt;Thur&lt;/option&gt;
        &lt;option value="Fri"&gt;Fri&lt;/option&gt;
        &lt;option value="Sat"&gt;Sat&lt;/option&gt;
        &lt;option value="Sun"&gt;Sun&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="week_2"&gt;       
        &lt;option value="Mon"&gt;Mon&lt;/option&gt;
        &lt;option value="Tues"&gt;Tues&lt;/option&gt;
        &lt;option value="Wed"&gt;Wed&lt;/option&gt;
        &lt;option value="Thur"&gt;Thur&lt;/option&gt;
        &lt;option value="Fri"&gt;Fri&lt;/option&gt;
        &lt;option value="Sat"&gt;Sat&lt;/option&gt;
        &lt;option value="Sun"&gt;Sun&lt;/option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>When I use the code above, I found that the 'weekday' is related to 'week', that means when I change week value, the weekday value will change to the first value of 'week_array'.</p>
  
  <p>e.g </p>
  
  <p>If the default value of '<strong>week_array</strong>' and '<strong>weekday_array</strong>' are '<strong>week_1</strong>' and '<strong>Fri</strong>', when I change '<strong>week_array</strong>' from '<strong>week_1</strong>' to '<strong>week_2</strong>', the '<strong>weekday_array</strong>' will change to '<strong>Mon</strong>' because of '<strong>weekday_array</strong>' is related to '<strong>week_array</strong>'.</p>
  
  <p>The Question is :<br>
  1、How to create a 2-column-selection without relation by mobiscroll.<br>
  2、If mobiscroll can't do such things, how can i write it by nomal html 5 code.</p>
  
  <p>This is my first time to ask question on stackoverflow, wish sb. can help and thanks a lot to all.</p>
  
  <p>~~~~~~~~~~~~~~~~~~~~~~~~~</p>
  
  <p>I have found a method to solve my problem. I create however a scroller with custom wheels using mobiscroll, which was tought by mobiscroll personel from feedback email.</p>
  
  <p>The method is like this, create a custom wheels:</p>
  
  <pre><code>$('#weeks-weekday').mobiscroll({
      theme: 'bootstrap',
      display: 'bottom',
      maxWidth: [$(document).width()/2,$(document).width()/2],
  wheels: [[
      { label: 'Week', values: ['week_1', 'week_2', 'week_3'] },
      { label: 'Day', values: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'] }
      ]]
  });
  </code></pre>