小さな技術的な概要のフロントエンド

プロジェクト開発は、技術と時代の先端部を総括する、以上です。

図1に示すように、チェックボックスの動的ロード

<DIV CLASS = "フォームグループ"> 
     <ラベルクラス= "COL-SM-2コントロールラベル">学科</ label>は
     <DIV CLASS = "COL-SM-10" ID = "subjectIds"> 
     </ DIV > 
</ div>

 

関数getSubjectList（）{ 
   ajaxWithUser（ "/コース/ getAllSubject"、{タイプ：1}、関数（データ）{
　　　　　　　VARのリスト= data.data;
             VAR optionStr = '' ;
             のための（VAR i = 0; I <list.length ;私は++ ）{ 
                optionStr = optionStr + "<ラベル>" 
                    + + "<+リスト[i]は.ID + =入力名= 'subjectIdList'クラス= 'フォームコントロール' TYPE = 'チェックボックス'の値を" ">" 
                    リスト[I] .nameの + "</ label>は" 
            } 
            $（ "#subjectIds」 ）の.html（optionStr）; 
        }）;

    }

    　　　　編集エコー

// 取消选中 
        。$（ "＃のsubjectIds入力"）、各（関数（）{
             のために（VAR I = 0; I <data.subjectIdList.length、私は++ ）{ 
                $（この）.prop（ "確認"、偽） ; 
            } 
        }）。
// 选中 
。$（ "＃1 subjectIds入力"）各（関数（）{
             用（VAR i = 0; I <data.subjectIdList.length; iは++ ）{
                 場合（$（この）.val（）== データ。 subjectIdList [I]）{
                     // 3.选中 
                    $（この）.prop（、 "チェックする" 真）。
                } 
            } 
        }）。

　　　　選択された値を取得します。

VAR。subjectIds = $（ "入力：チェックボックスの[名= 'subjectIdList']：チェックする"）マップ（関数（指数、elemは）{
                     返す.val $（ELEM）を（）; 
                }）get（）は参加（。。 " 、 '）;

2、ドロップダウンボックス

// 动态填写下拉框
関数changeSelect（ID、OBJ）{
     VARの optionStr = "<オプション値= ' - 1'>" + "请选择" + "</オプション>" 。
    用（VAR i = 0; I <obj.length; iは++ ）{ 
        optionStr = optionStr + "<オプション値= '" + OBJ [I] .ID + "'>" + OBJ [I] .nameの+ "</オプション>」
    } 
    $（ "＃" + ID）の.html（optionStr）。
}