單選框的實現

1.單選框的實現(搜索框)  

 //jsp頁面
<div class="control-group span6" style="display: inline">
      <label class="control-label" for="positionCode">庫位：</label>
           <div class="controls">
               <div class="span12 required" style=" float: none !important;">
   <input class="span10 select2_input" type="text" id="positionCode" name="positionCode"
                           value="${inventory.positionCode}">
                </div>
           </div>
 </div>
//庫位下拉框列表
    $("#positionCode").select2({
        placeholder: "--請選擇庫位--",//文本框的提示信息
        minimumInputLength: 0, //至少輸入n個字符，纔去加載數據
        allowClear: true, //是否允許用戶清除文本信息
        multiple: false,//false爲單選框，true爲複選框
        formatNoMatches: "沒有結果",
        closeOnSelect: false,
        ajax: {
            url: context_path + "/inventory/getSelectPosition",
            dataType: "json",
            delay: 250,
            data: function (term, pageNo) { //在查詢時向服務器端傳輸的數據
                term = $.trim(term);
                selectParam = term;
                return {
                    inventoryTaskId: $("#baseInfor #inventoryTaskId").val(),
                    queryString: term, //聯動查詢的字符
                    pageSize: 15, //一次性加載的數據條數
                    pageNo: pageNo, //頁碼
                    time: new Date()
                    //測試
                }
            },
            results: function (data, pageNo) {
                var res = data.result;
                if (res.length > 0) { //如果沒有查詢到數據，將會返回空串
                    var more = (pageNo * 15) < data.total; //用來判斷是否還有更多數據可以加載
                    return {
                        results: res,
                        more: more
                    };
                } else {
                    return {
                        results: {
                            "id": "0",
                            "text": "沒有更多結果"
                        }
                    };
                }

            },
            cache: true
        }
    });
    //庫位下拉框change事件
    $("#baseInfor #positionCode").on("change", function (e) {
        $("#baseInfor #positionCode").val(e.added.text);
    })


     //後臺controller層
     /**
     * @Description: 獲取庫位下拉列表數據源
     * @Param:
     * @return:
     * @Author: pz
     * @Date: 2019/1/27
     */
    @RequestMapping(value = "/getSelectPositionCode")
    @ResponseBody
    public Map<String, Object> getSelectPositionCode(Long inventoryTaskId, String 
                               queryString, int pageNo, int pageSize) {
        Map<String, Object> map = new HashMap<>();
        List<Map<String, Object>> PositionList = inventoryService.getSelectPositionList(inventoryTaskId, queryString, pageSize, pageNo);
        map.put("result", PositionList);
        map.put("total", inventoryService.getSelectPositionTotal(inventoryTaskId, queryString));
        return map;

    }

    //service層
    List<Map<String, Object>> getSelectPositionList(Long inventoryTaskId, String 
        queryString, int pageSize, int pageNo);
    

    Integer getSelectPositionTotal(Long inventoryTaskId, String queryString);

     
     //serviceImp實現層
    @Override
    public List<Map<String, Object>> getSelectPositionList(Long inventoryTaskId, String queryString, int pageSize, int pageNo) {
        Page page = new Page(pageNo, pageSize);
        return inventoryDAO.getSelectPositionList(page, inventoryTaskId, queryString);
    }

   
    @Override
    public Integer getSelectPositionTotal(Long inventoryTaskId, String queryString) {
        return inventoryDAO.getSelectPositionTotal(inventoryTaskId, queryString);
    }

     //Dao層
    List<Map<String, Object>> getSelectMaterielList(Page page, @Param("inventoryTaskId") 
       Long inventoryTaskId, @Param("positionCode") String positionCode, 
       @Param("queryString") String queryString);

   
    Integer getSelectMaterielTotal(@Param("inventoryTaskId") Long inventoryTaskId, 
       @Param("positionCode") String positionCode, @Param("queryString") String 
       queryString);


    //xml層
    <select id="getSelectMaterielList" resultType="java.util.Map">
        select DISTINCT material_code as id,material_name as text
        from inventory_task_detail
        where position_code=#{positionCode}
        and inventory_task_id=#{inventoryTaskId}
        <if test='queryString!=null and queryString!=""'>
            and material_name like concat(concat('%', #{queryString}), '%')
        </if>
        and state="0" or state="2"
    </select>

    <select id="getSelectMaterielTotal" resultType="java.lang.Integer">
        select count(DISTINCT material_code)
        from  inventory_task_detail
        where position_code=#{positionCode}
        and inventory_task_id=#{inventoryTaskId}
        <if test='queryString!=null and queryString!=""'>
            and material_code like concat(concat('%', #{queryString}), '%')
        </if>
        and state="0" or state="2"
    </select>

2.單選框的實現 (普通)

jsp頁面(跳轉頁面時，獲取信息) 
<div class="control-group span6" style="display: inline">
    <label class="control-label" for="inventoryUserId">盤點人員：</label>
       <div class="controls">
           <div class="input-append span12 required" style=" float: none !important;">
              <select id="inventoryUserId" name="inventoryUserId" style="width:69%;">
                 <option value="">--請選擇--</option>
                     <c:forEach items="${userList}" var="user">
                         <option value="${user.userId}"
                      <c:if test="${user.userId eq  inventoryTask.inventoryUserId}">  
                           selected</c:if> >${user.username}</option>
                     </c:forEach>
              </select>
           </div>
       </div>
 </div>


//後臺controller層
  
@RequestMapping(value = "/toEdit")
@ResponseBody
public ModelAndView toEdit(Long id) {
    ModelAndView mv = this.getModelAndView();
    //獲取用戶集合
    List<User> userList = userService.selectList(
            new EntityWrapper<>()
    );
    mv.addObject("userList", userList);
    mv.setViewName("techbloom/stock/inventory/inventoryTask_edit");
    return mv;
}

3.依據條件模糊搜素 

<li class="field-group field-fluid3">
     <label class="inline" for="materialCode" style="margin-right:20px;width:100%;">
          <span class="form_label" style="width:80px;">物料編號：</span>
               <select id="materialCode" name="materialCode" style="width:70%;">
                  <option value="">--請選擇--</option>
                       <c:forEach items="${lstMateriel}" var="materiel">
                          <option value="${materiel.materielCode}"
                            <c:if test="${materiel.materielCode eq materiel.materielName}">selected</c:if> >${materiel.materielCode}</option>
                        </c:forEach>
               </select>
     </label>
</li>

                    
<script type="text/javascript">

    $("#queryForm #materialCode").select2({
        minimumInputLength: 0,
        placeholderOption: "first",
        allowClear: true,
        delay: 250,
        formatNoMatches: "沒有結果",
        formatSearching: "搜索中...",
        formatAjaxError: "加載出錯啦！"
    });
    $("#queryForm #materialCode").on("change.select2", function () {
            $("#queryForm #materialCode").trigger("keyup")
        }
    );
</script>