select 联动用到的范围很广,下面介绍一下简单的二级联动

方法/步骤

  1.  

    做一个简单的html页面,用于显示select联动,如图所示:

    纯js做的select二级联动-LMLPHP
    纯js做的select二级联动-LMLPHP
  2.  

    设置js,点击一级选择项时,创建其下对应的二级选择项;因为是联动的,所以一级选择项变动时,要先清空,先前一级选择项下对应的所有二级选择项。

    纯js做的select二级联动-LMLPHP
  3.  

    再根据要选择的一级选择项,创建对应的新的二级选择项,过程如图:

    纯js做的select二级联动-LMLPHP
    纯js做的select二级联动-LMLPHP
  4. 4

    结果显示如下,选择B时,创建出三个选择项,选择C时,先清除B的所有关联的二级选择,再创建C对应的4个二级选项。

    纯js做的select二级联动-LMLPHP
    纯js做的select二级联动-LMLPHP
     
05-06 04:52