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.
The core rails code to haml is like this:
- 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=>'li_option')
js code for mobiscroll is like this:
$('#weeks-weekday').mobiscroll().select({
theme: 'bootstrap',
display: 'bottom',
mode: 'scroller',
group: true,
maxWidth: [$(document).width()/2,$(document).width()/2]
});
html code for above is like this:
<select id="weeks-weekday">
<optgroup label="week_1">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thur">Thur</option>
<option value="Fri">Fri</option>
<option value="Sat">Sat</option>
<option value="Sun">Sun</option>
</optgroup>
<optgroup label="week_2">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thur">Thur</option>
<option value="Fri">Fri</option>
<option value="Sat">Sat</option>
<option value="Sun">Sun</option>
</optgroup>
</select>
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'.
e.g
If the default value of 'week_array' and 'weekday_array' are 'week_1' and 'Fri', when I change 'week_array' from 'week_1' to 'week_2', the 'weekday_array' will change to 'Mon' because of 'weekday_array' is related to 'week_array'.
The Question is :
1、How to create a 2-column-selection without relation by mobiscroll.
2、If mobiscroll can't do such things, how can i write it by nomal html 5 code.
This is my first time to ask question on stackoverflow, wish sb. can help and thanks a lot to all.
~~~~~~~~~~~~~~~~~~~~~~~~~
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.
The method is like this, create a custom wheels:
$('#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'] }
]]
});