編寫select下拉框的幾種方式
阿新 • • 發佈:2019-01-07
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
value屬性的值就是傳入後臺可接收到的值。
若要使下拉框預設選中:checked屬性設定為true,也可在js中設定,$(“xxx”).prop(“checked”, true);
當要從資料庫中動態獲取資料來顯示到下拉框中,有時候要顯示name,但傳入後臺的是id,就有點難辦了。
<select id="storeId" name="storeid" datatype="*" nullmsg="請選擇劵型別">
<option value="">商店名稱</option>
<c:forEach items="${list}" var="list">
<option id="storeOption_${list.ID }" value="${list.ID }"
areaCode ="${list.AREACODE }">${list.STORENAME }</option>
</c:forEach>
</select>
這種方式是用c標籤的迴圈,加上EL表示式的方式動態顯示出來。
$("#storeId").change(function() {
$("#eMapId").val($("#storeOption_" + $(this).val()).attr("areaCode"));
});
當select的值發生改變時,eMapId也相應的改變。
這種方式黨對起來比較複雜,可以用另一種框架:jQuery easyui
<td><input id="operatorInfo_storeName" class="easyui-combobox" url="common/operator/getstorename"
editable="false" panelHeight="auto" valueField="id" textField="text" prompt="請選擇所屬門店"/></td>
class屬性必須指定為easyui-combobox
url的地址為取得id 和 text 的action地址
valueField 和 textField 屬性的值必須和後臺返回的引數名稱相對應
editable=”false”不可編輯, panelHeight=”auto”設定下拉框的長度自動適應
但是用這個框架要特別注意到的是,在用ajax提交的時候,若獲取textField的值必須這樣:
var storeId = $("#operatorInfo_storeName").combobox("getValue");
如果涉及到修改,要獲取當前選擇的行的資料,並使下拉框預設選中某個屬性
$("#operatorInfo_storeName").combobox("setValue", row.STOREID);