select2.js
7.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
//グローバル変数の定義
var httpObj; // HTTP通信用オブジェクト
var timerId; // HTTP通信用タイマーオブジェクト
var timeout_sec = 10; // HTTP通信タイムアウト秒数
function orderItems() {
var cart_select = document.getElementById('cart');
var cart_opt_num = cart_select.length;
var i;
for(i = cart_opt_num - 1; i >= 0; i--) {
var cart_opt = cart_select.options[i];
cart_opt.selected = true;
}
document.getElementById('orderForm').submit();
}
function addItem() {
var item_select = document.getElementById('item');
var cart_select = document.getElementById('cart');
var item_opt_num = item_select.length;
var i;
for(i = item_opt_num - 1; i >= 0; i--) {
var item_opt = item_select.options[i];
if(item_opt.selected == true) {
// 選択されたoptionタグ情報を取得
var item_opt_text = item_opt.text;
var item_opt_value = item_opt.value;
// 選択されたoptionタグを、商品一覧用のselectタグから削除
item_select.remove(i);
// カート一覧用にoptionタグを新規に生成
var cart_opt = document.createElement('option');
cart_opt.text = item_opt_text;
cart_opt.value = item_opt_value;
// optionタグをカート一覧用のselectタグに追加する。
try {
cart_select.add(cart_opt, null); // W3C DOM準拠ブラウザー用
}
catch(ex) {
cart_select.add(cart_opt, -1); // Internet Explorer用
}
}
}
}
function delItem() {
var item_select = document.getElementById('item');
var cart_select = document.getElementById('cart');
var cart_opt_num = cart_select.length;
var i;
for(i = cart_opt_num - 1; i >= 0; i--) {
var cart_opt = cart_select.options[i];
if(cart_opt.selected == true) {
// 選択されたoptionタグ情報を取得
var cart_opt_text = cart_opt.text;
var cart_opt_value = cart_opt.value;
// 選択されたoptionタグを、カート一覧用のselectタグから削除
cart_select.remove(i);
// 商品一覧用にoptionタグを新規に生成
var item_opt = document.createElement('option');
item_opt.text = cart_opt_text;
item_opt.value = cart_opt_value;
// optionタグを商品一覧用のselectタグに追加する。
try {
item_select.add(item_opt, null); // W3C DOM準拠ブラウザー用
}
catch(ex) {
item_select.add(item_opt, -1); // Internet Explorer用
}
}
}
}
function eliminateDropdownList() {
// 表示されているセレクトメニューのoptions数を調べる
var select_node = document.getElementById('item');
var opt_num = select_node.length;
//select_node.options.length = 0;
var i;
for(i = opt_num - 1; i >= 0; i--) {
select_node.remove(i);
}
}
// ドロップダウンリストを生成
function generateDropdownList(text_data) {
// 受信したテキストデータを行ごとに配列に格納する
var lines = text_data.split("\n");
// ドロップダウンリストを削除
eliminateDropdownList();
// selectタグの参照
var select_node = document.getElementById('item');
// 項目を追加
for(i=0; i<lines.length; i++) {
if(lines[i] == '') {
break;
}
var parts = lines[i].split(",");
var code = parts[0];
var item = parts[1];
// optionタグを生成
var opt = document.createElement('option');
// optionタグにvalue属性を追加
opt.value = code;
// optionタグの表記を追加
opt.text = '[' + code + '] ' + item;
// optionタグをselectに追加する。
try {
select_node.add(opt, null); // W3C DOM準拠ブラウザー用
}
catch(ex) {
select_node.add(opt, -1); // Internet Explorer用
}
}
}
// テキストの内容をドロップダウンリストとして表示
function setItems(e) {
// HTTP通信を開始し、完了したら上記関数を実行させる
httpRequest('item.txt', generateDropdownList);
}
function getTargetNode(e) {
// 対象要素の参照を取得
var target_node;
if(e.target) {
target_node = e.target;
} else {
target_node = e.srcElement;
}
// Safari対策
if (target_node.nodeType == 3) {
target_node = target_node.parentNode;
}
return target_node;
}
// 引数に与えられたURLにHTTPリクエストを行ない、指定された関数を実行
function httpRequest(target_url, funcitonReference) {
try {
if(window.XMLHttpRequest) {
httpObj = new XMLHttpRequest();
} else if(window.ActiveXObject) {
httpObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
httpObj = false;
}
} catch(e) {
httpObj = false;
}
if(! httpObj) {
httpObjGenerateFail();
}
// タイマーをセット
timerId = setInterval('timeoutCheck()', 1000);
httpObj.open("GET", target_url, true);
httpObj.onreadystatechange = function() {
if (httpObj.readyState == 4) {
clearInterval(timerId);
if (httpObj.status == 200) {
funcitonReference(httpObj.responseText);
} else {
alert(httpObj.status + ' : ' + httpObj.statusText);
return false;
}
}
}
httpObj.send('');
}
// XMLHttpRequestオブジェクト生成に失敗した場合の処理
function httpObjGenerateFail() {
alert('ご利用のブラウザーでは、当サイトをご利用頂けません。');
return false;
}
// HTTPタイムアウト処理
function timeoutCheck() {
timeout_sec --;
if(timeout_sec <= 0) {
// タイマーをストップする
clearInterval(timerId);
// HTTPリクエストを中断する
httpObj.abort();
// エラーダイアログを表示
alert('タイムアウトです。');
return false;
}
}
// load時の処理
function setListeners(e) {
setItems();
var addBtn = document.getElementById('addBtn');
addListener(addBtn, 'click', addItem, false);
var delBtn = document.getElementById('delBtn');
addListener(delBtn, 'click', delItem, false);
var orderBtn = document.getElementById('orderBtn');
addListener(orderBtn, 'click', orderItems, false);
}
// イベントリスナー登録
function addListener(elem, eventType, func, cap) {
if(elem.addEventListener) {
elem.addEventListener(eventType, func, cap);
} else if(elem.attachEvent) {
elem.attachEvent('on' + eventType, func);
} else {
alert('ご利用のブラウザーはサポートされていません。');
return false;
}
}
// load時のイベントリスナーをセットする
addListener(window, 'load', setListeners, false);