select2.js 7.12 KB
//グローバル変数の定義
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);