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; }