select2技术关联品牌（实现下拉列表）

效果图：

一、select2接收的json数据格式

{data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]}；

二、数据库响应的sql语句

<select id="selectOptionList" resultType="java.util.Map">
  select id,name as text from tb_brand;
</select>

三、控制层

/**
 * 查询品牌完成模板的下拉类表
 */
@RequestMapping("/selectOptionList.do")
public List<Map> selectOptionList(){

    return brandService.selectOptionList();
}

四、前端js捏造数据格式

4-1.service.js层

//下拉列表数据
this.selectOptionList=function(){
   return $http.get('../brand/selectOptionList.do');
}

4-2.js控制层

$scope.brandList={data:[]};//品牌列表
   
//读取品牌列表
$scope.findBrandList=function(){
   brandService.selectOptionList().success(
      function(response){
         $scope.brandList={data:response};
      }
   );    
}

4-3.html层--引入对应的js

<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->

<script type="text/javascript" src="../js/base_pagination.js"></script>
<link rel="stylesheet" href="../plugins/select2/select2.css" />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
<!--引入下拉列表select2，需要放在base_pagination.js下，因为里面有用到app-->
<script type="text/javascript" src="../js/angular-select2.js"> </script>

4-4.html用select2组件实现多选下拉框

<input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌（可多选）" class="form-control" type="text"/>

 

转载于:https://my.oschina.net/u/4117203/blog/3051352