编写select下拉框的几种方式

来源:互联网 发布:足球指数分析软件 编辑:程序博客网 时间:2024/05/23 11:45
<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);
0 0
原创粉丝点击