リストボックスをユーザー自身で編集できるようにしたい。

実現したいこと

railsでwebアプリを開発しています。
簡易的予約システムを開発しています。
リストボックス内のデータをユーザーの編集画面で変更編集できるようにしたいです。
編集の方法としてはhtmlのinputで入力したデータをリストボックスに追加する感じをイメージをしています。

###試したこと
リストボックス内のデータのカラムを作りそれで受け渡しをすればいいんじゃないかと思い試してみたのですが、DBを介さずにもっと簡易的な方法でリストボックス内のデータを編集できたりしないかをご教授願いたいです。

HTML
1<h1>予約</h1>
2<p>色々お試し中_bootstrap-datepicker</p>
3
4
5<div class="main users-new">
6  <div class="container">
7    <div class="form-heading">ログイン</div>
8    <div class="box30">
9      <div class="form-group" id="datepicker-inline">
10        <div class="box-title"><P>日付:<input type="text" id="my_hidden_input"></p></div>
11        <div class="col-sm-9 form-inline"></div>
12        <div class="in-line" data-date=today()></div>
13      </div>
14
15
16      <div class="cp_ipselect cp_sl03">
17      <select required >
18      <option value="" hidden>コース</option>
19      <option value="1">60分</option>
20      <option value="2">90分</option>
21      <option value="3">120分</option>
22      <option value="4">150分</option>
23      </select>
24      </div>
25
26      <div class="cp_ipselect cp_sl03">
27      <select required>
28      <option value="" hidden>時間</option>
29      <option value="1">10:00</option>
30      <option value="2">11:00</option>
31      <option value="3">12:00</option>
32      <option value="4">13:00</option>
33      </select>
34      </div>
35
36      <a href="#" class="square_btn">
37	    <i class="fa fa-caret-right"></i> 予約する</a>
38
39      </div>
40      <p>現在時刻: <%= @time %></p>
41</div>
42
43</div>
44</div>
45
46<script>
47
48$(function(){
49    $('#datepicker-inline .in-line').datepicker({
50        format: "yyyy年mm月dd日",
51        language: "ja",
52        autoclose: true,
53        weekStart:　"7",
54        todayHighlight: true
55    }
56    );
57    $('.in-line').on('changeDate', function() {
58        $('#my_hidden_input').val(
59            $('.in-line').datepicker('getFormattedDate')
60        );
61    });
62
63});
64</script>
65
66<style type="text/css">
67    .datepicker-days th.dow:first-child,
68    .datepicker-days td:first-child {
69        color: #f00;
70        /*padding: 10px 10px;*/
71    }
72    .datepicker-days th.dow:last-child,
73    .datepicker-days td:last-child {
74        color: #00f;
75    }
76
77    .datepicker-days td[data-day="2018/09/17"] {
78        color: #f00;
79    }
80</style>

m.ts10806

2018/12/14 04:09

追加したものはそのときだけでその後継続はしないということでしょうか。

退会済みユーザー

2018/12/14 04:16

予約システムなので追加・削除をユーザー自身で設定し、継続させたいです。なのでDBを介さないといけないのかなと思いつつDBを介さない方法がないかと思い質問させていただきました。

m.ts10806

2018/12/14 04:18

使ってるユーザー(というか同じPCの同じブラウザ)だけのものというのであればできます。様々なユーザー(別PCまたは別ブラウザ)で共有したいのであればDBを介すことになります。どちらでしょうか？

退会済みユーザー

2018/12/14 04:32

CtoCのサービスを想定して作っているのでやはりDBを介す必要があるんですね。 progateをrailsについて勉強したのですがあまり、DB の部分に関して説明されていなかったのでDBを使用する場合のカラムは配列型を使用するのでしょうか？もしお分かりでしたらご教示していただけると幸いです。

m.ts10806

2018/12/14 04:33

これは回答の方が良さそうですね。(DBじゃない方かなと思ってコード作りかけてました)

退会済みユーザー

2018/12/14 04:37

曖昧な質問をしてしまい申し訳ございません。何卒よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

DBを使用する場合のカラムは配列型を使用するのでしょうか？

Railsの仕組みを知っているわけではないのですが、配列型である必要はないと思います。
これはあくまで登録の際の選択肢の増減を想定されているかと思いますが、
要は「マスター」という考え方になります。
このコードにはこの名前が（カテゴリとかメニューとか区分とか）というものを管理するテーブルですね。
つまり
コードID・コード名　の最低２カラムのものだけを用意し、そのテーブルから情報を取得してセレクトボックスを作るようにすれば良いです。
取得したデータは　(レコード番号=>)コードID=>コード名の配列にはなっていますが、個々のカラムは文字列（または数値）で充分です。

すごくちなみに、ですが、「同PC同ブラウザ（同一セッション）だけで持っておきたい」のであればJavaScriptでブラウザのストレージに保管する「LocalStorage」という半永続的な仕組みが使えますので、何かのときのために頭の片隅にでも置いておいてください。

投稿2018/12/14 04:41

m.ts10806

総合スコア80850