select标签使用技巧

前台jsp可构造动态下拉：

<select class="chosen-select form-control" name="BIANMA" id="bm_id" data-placeholder="请选择贷款银行"   style="vertical-align:top;" style="width:98%;" >
          <option value=""></option>
          <c:forEach items="${dicList}" var="dic">
           <option value="${dic.BIANMA }" <c:if test="${dic.BIANMA == pd.BIANMA}">selected</c:if>>${dic.NAME }</option>
          </c:forEach>
         </select>

列表中的：

<c:forEach items="${varList}" var="var" varStatus="vs">

<td class='center'>
           <div id='divId' class='context'>
            <select id ='ztId' class='contexts' disabled="disabled">
             <option value='0' <c:if test="${var.STATUS=='0'}">selected</c:if>>已录入</option>
             <option value='1' <c:if test="${var.STATUS=='1'}">selected</c:if>>已提交</option>
             <option value='2' <c:if test="${var.STATUS=='2'}">selected</c:if>>已审核</option>
             <option value='3' <c:if test="${var.STATUS=='3'}">selected</c:if>>已退回</option>
             <option value='4' <c:if test="${var.STATUS=='4'}">selected</c:if>>已完成</option>
            </select>
           </div>
           </td>

</c:forEach>

非动态：

<select class="chosen-select form-control" name="DBFS" id="dbfsid" data-placeholder="请选择担保方式" style="vertical-align:top;" style="width:98%;" >
          <option value="保证" <c:if test="${pd.DBFS=='保证'}">selected</c:if>>保证</option>
          <option value="抵押" <c:if test="${pd.DBFS=='抵押'}">selected</c:if>>抵押</option>
          <option value="质押" <c:if test="${pd.DBFS=='质押'}">selected</c:if>>质押</option>
          <option value="留置" <c:if test="${pd.DBFS=='留置'}">selected</c:if>>留置</option>
          <option value="定金" <c:if test="${pd.DBFS=='定金'}">selected</c:if>>定金</option>
         </select>

js获取下拉的 value、label、index：

$('#bm_id').change(function(){
          var bianma = document.getElementById('bm_id');//获取select的dom
    var index = bianma.selectedIndex;//获取选中的index
    var label = bianma.options[index].text; //获取标签值
    var value = bianma.options[index].value;//获取value值
    document.getElementById('DKYHID').value = label;
          })

js.设置只读：

if($("#DKSQMX_ID").val()!=null&&$("#DKSQMX_ID").val()!=''){
document.getElementById('bm_id').disabled='disabled';
}

但是disabled会失去焦点，无法传值，需在提交的时候，去掉只读属性：
$("#bm_id").attr("disabled",false);

CSS 去掉下拉框的样式（下拉箭头，下拉边框）

.context select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: 0;

/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
.context select::-ms-expand { display: none; }

select标签使用技巧

猜你喜欢