動的にプルダウンリストなどを生成したい　js?

画像の様な入力フォームを作っているのですが、
例えば、画像の場合で言うなら「言語」のところで
「追加する」をクリックすると
上と同じプルダウンリストが生成されるようにするにはどうしたらいいでしょうか？

画像はモックアップでまだ記述もなにもないのでちょっと漠然としているかもしれませんが、昔になんかのサイトに登録した時にこんな感じの登録の仕方をした覚えがあって、どうしたら実装できるんだろうと思い質問してみました。

js使ってるんですかね...

そのサイトがなんのサイトかは忘れてしまってるのですが、もう一点気になるところがあります。
本来、どれだけの入力欄があるかを予め洗い出してDBにカラムを割り当てて作っていくと思います。
動的にプルダウンやテキストボックスを生成するということは、そのデータを格納するDBのカラムも変動するはず。

そこはどうなっているのでしょうか？
そういうサイトの場合は、予めDBカラムを用意しているのではなく
そこも入力フィールド数に合わせて動的に作り出されているのでしょうか？

んー気になることが多すぎます。

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

回答6件

最低限のコードの例です。

HTML
1<html lang="ja">
2<head>
3<meta charset="utf-8">
4<title>title</title>
5<script>
6var skillList = {"aaa":"技能１", "bbb":"技能２"};// selectの中のoptionにしたいデータの辞書
7// selectを追加するメソッド
8function addSkill() {
9	var skill = document.getElementById("skill");
10	var select = document.createElement("select");
11	select.setAttribute("name", "skill[]");
12	for(var key in skillList) {
13		var val = skillList[key];
14		var option = document.createElement("option");
15		option.setAttribute("value", key);
16		option.innerText = val;
17		select.appendChild(option);
18	}
19	skill.appendChild(select);
20}
21
22window.onload = function() {
23	// 最初に1項目用意するための処理
24	addSkill();
25}
26</script>
27</head>
28<body>
29	<form action="#" method="POST">
30		<div id="skill">
31			<!--ここにselectが増えていく-->
32		</div>
33		<button id="add" type="button" onclick="addSkill()">追加する</button>
34		<input type="submit" value="投稿">
35	</form>
36</body>
37</html>

このformがサーバに送るデータは以下のような形になります。

skill[]=aaa&skill[]=bbb&skill[]=aaa

追加した分だけskill[]が連結されて送られてきます。
PHPであれば以下のようなコードで受け取ることになります。

PHP
1$skill_array = $_POST['skill'];
2foreach($skill_array as $skill) {
3    // $skill に aaa や bbb が入る
4}

投稿2016/06/09 02:14

編集2016/06/09 13:36

masaya_ohashi

総合スコア9206

earnest_gay

2016/06/09 12:53

詳しくありがとうございます。指摘の件ですが、癇に障られたら申し訳ないです。解決したものについては解決済みにしており、解決していないものについては、補足したりなどしております。またそれらをどのタイミングで行うかは、人それぞれ生活事情なりスタイルなり今それに費やす時間があるかないか優先度も人それぞれだと思いますので masaya_ohashiさんの目についたり、癇に障らないようにするためにタイミングをこちらで調整することはできない事が一般的ではないでしょうか。反論ではありませんが、部分部分だけを見ているのかは分かりませんが質問丸投げとか、反応ないとか、言いたい放題言われたくありません。仮に、質問丸投げなのであれば、わざわざ一部を投稿しないで全部を投稿し、「これをこうこうしたいのでソース教えてください」というコピペプログラマースタイルな投稿してます。もし他ユーザーの「何か」に不快に感じられるようでしたらこんなところで言うのではなくて運営に報告連絡相談するべきなのではないでしょうか。率直に思ったので言わせて頂きました。勿論、頭を悩ませてくれるベテランの働きには大変感謝しております。先日も無知な私相手にリアルタイムといっていいほど早いレスポンスで付き合ってくれた方もいますし。丸投げに関しては同意されている他ユーザーさんもいらっしゃることは事実なので質問の仕方には気を付けていきたいと思います。

masaya_ohashi

2016/06/09 13:35

真摯な受け答えありがとうございます。とりあえず、私の補足部分はこのサイトの趣旨にそぐわないため後ほど回答から削除します。厳しいことを言って申し訳ありませんでした。

earnest_gay

2016/06/09 13:40

いえ！こちらも時間短縮したいが為にとりあえず質問しておいて合間に何かやっておこうという気持ちで質問していたことは確かですし。それよりも回答してくださる方への返事のレスポンスが遅かったと今、未解決の質問を処理していて思いました。適切な指摘ありがとうございます。

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

ベストアンサー

Vue.jsを使うと簡単に実装できるのでサンプルを置いておきます．

html
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<title>Sample</title>
4<style>
5[v-cloak] {
6    visibility: hidden;
7}
8</style>
9<h1>Sample</h1>
10<form id="form" v-cloak action="submit.php" method="post">
11    <div>
12        言語:
13        <div v-for="i in numbers.language">
14            <select name="languages[{{i}}][name]">
15                <option selected>選択してください▼</option>
16                <option value="jp">日本語</option>
17                <option value="en">英語</option>
18                <option value="fr">フランス語</option>
19                <option value="de">ドイツ語</option>
20            </select>
21            <select name="languages[{{i}}][level]">
22                <option selected>選択してください▼</option>
23                <option value="3">母語並みに話せる</option>
24                <option value="2">ビジネスで困らない程度に話せる</option>
25                <option value="1">日常会話で困らない程度に話せる</option>
26            </select>
27        </div>
28        <a @click.prevent="++numbers.language" href="">追加する</a>
29    </div>
30</form>
31<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
32<script>
33'use strict';
34new Vue({
35    el: '#form',
36    data: {
37        numbers: {
38            language: 1
39        }
40    }
41});
42</script>

投稿2016/06/09 02:34

編集2016/06/09 03:20

mpyw

総合スコア5223

mpyw

2016/06/09 02:35

質問投げっぱなし放置の指摘に関してはmasaya_ohashiさんに同意します．

earnest_gay

2016/06/09 13:43

回答ありがとうございます！ DBへの格納は、別質問で解決したのですが、単にリレーション張るような形にすればいいということに気づけました。

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

編集中はJavascriptで追加/削除していき、確定ボタンでsubmitする際に、
登録情報と共にリストに追加した値をDBへ登録するのがいいのでは？

Javascriptで追加する処理はこちら↓を参考にしてみてください。
select 内の option 要素(セレクトボックス)を JavaScript で追加していく

DBでのデータの持ち方ですが、マスタテーブル的に持つのがいいかと思います。
あとは、
・個人別にするか、全体で１つにするか
・固定項目と追加項目を分けられるようにするか
・追加上限を設けて1レコードで管理できるようにするか上限なしにして複数レコードで管理するか
等を考える･･･ですかね。

投稿2016/06/09 01:57

kaputaros

総合スコア1844

earnest_gay

2016/06/09 13:42

回答ありがとうございます！ DBへの格納は、別質問で解決したのですが、単にリレーション張るような形にすればいいということに気づけました。

kaputaros

2016/06/10 07:42 編集

DB問題は別質問で解決したということですので、その質問のリンクを追記しておくと、後から見た人が参考にしやすいかと思います。なにはともあれ、解決してよかったですね。コピペのコメントというのが。。。な感じですが。

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

プルダウンを増やすのは js か、
「追加する」がクリックされたら一回 submit して
画面を再描画（そのタイミングでプルダウンを増やす）とかですかね･･･
後者の場合は入力途中の値を保持するのとか気にしないといけないと思いますけど。

DB構造に関しては、可変なのであれば以下の感じでしょうか。

↓ こうじゃなくて

+-----+-----+-----+-----+
|USER |LANG1|LANG2|LANG3|
+-----+-----+-----+-----+
|0001 |Java |C#   |VB   |
+-----+-----+-----+-----+
|0002 |PHP  |     |     |
+-----+-----+-----+-----+

↓ こう

+-----+-----+-----+
|USER |IDX  |LANG |
+-----+-----+-----+
|0001 |0    |Java |
+-----+-----+-----+
|0001 |1    |C#   |
+-----+-----+-----+
|0001 |2    |VB   |
+-----+-----+-----+
|0002 |0    |PHP  |
+-----+-----+-----+

とか？

投稿2016/06/09 01:39

sk_3122

総合スコア1126

earnest_gay

2016/06/09 13:42

回答ありがとうございます！ DBへの格納は、別質問で解決したのですが、単にリレーション張るような形にすればいいということに気づけました。

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

前半の入力フォームについてはわかりませんが、後半のDBの格納についてだけ

本来、どれだけの入力欄があるかを予め洗い出してDBにカラムを割り当てて作っていくと思います。

動的にプルダウンやテキストボックスを生成するということは、そのデータを格納するDBのカラムも変動するはず。

RDBMSを使っているのなら、カラムが可変になることはありません。
そこは正規化したテーブルにデータを格納するはずです。

SQL
1/* Oracle版です */
2-- 社員tbl
3create table tbl_employee (
4  emp_id   varchar2(xx),
5  emp_name varchar2(xx),
6  /* その他あれば */
7  constraint key_employee primary key(emp_id) 
8);
9
10-- スキル
11create table tbl_skill(
12  skill_id varchar2(xx),
13  emp_id   varchar2(xx),
14  exp_years number(xx),
15  constraint key_employee primary key(skill_id,emp_id)
16);
17