selectコレクション選択demo

カスケードセレクタの考え方:親セレクタのchangeイベントを傍受し、変更するとid値を取得し、データとこのidが一致するサブセットデータをマッチングします.これらのデータを使用してサブセットselectボックスをレンダリングする

require(['./db.js'],function(db){

  $(function(){

    //window.onload js     ，      ，js/css/               

    // $(funciton(){})jquery       dom           

  const {dataA,dataB} = db

  //           

  getOption("#pro", dataA)

  //        

  function getOption(domId, data) {

    data.forEach(item => {

      $(domId).append(`${item.name}`)

    })

  }

  //  

  //1. select      

  $('#pro').on('change', function (e) {

    //    dom     ，               dom--  dom       

    $('#sub').empty()

    //     id        1 id         

    const proId = $(this).val()

    //        1   

    let subArr = dataB.filter(item => {

      return item.proId == proId

    })

    //    2   

    getOption("#sub", subArr)

  })

  })

})

，

`    ：      2     require.js    AMD    

最初はimport/export構文をそのまま使ってhtmlがサポートされていないことを発見し、babelでES 6=>ES 5を引用して発見するのは依然としてだめだと思いました--ページエラーrequireは定義されていません

       require     ，    require.js       。         common.js   AMD  。

common.js               ， AMD            ，                      。

              ，                 。

エントリ関数:
requireのコールバック関数でwindowを使いました.onloadロードエントリは、実行できないことに気づきました.その後jqのエントリ関数$(funciotn(){})を用いてこの問題を解決した.

    onload               ， $(function(){})  dom           。

`チェン一峰先生の文章に感謝します.jsの使い方
ここにdemo githubプロジェクトパスが付属しています