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