1. 程式人生 > >select標籤使用技巧

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