1

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'] }
    ]]
});
ElliotCui
  • 385
  • 2
  • 9
  • I am having hard time relating your code and your question, both are saying two different things. Where's `week_array` and `weekday_array`? And how can they have a default value? What are you exactly trying to do?? – Surya Nov 10 '14 at 08:28
  • @User089247 Sorry for that i discribed my question not so clearly. I have added html code to make question more clear. week_array and weekday_array is like a CONST. The first part of the code is writing by rails and haml. U can think the weekday_array is [Mon Tues .. Sun] and week_array is sth like [week_1, week_2] – ElliotCui Nov 10 '14 at 09:48

0 Answers0