jq实现动态下拉选择框

在HTML页面中，select标签可以很方便的解决下拉选择框的问题。但是下拉列表框中的内容，有时候需要根据某些页面的参数发生改变，这时就需要使用jq动态生成下拉选择框。

页面中policyid的下拉选择框需要根据参数flightnum来改变。policyid在显示的时候，显示的是名称，但是值是其对应的id。

前端代码如下：

<input type="text" name="flightnum" id="flightnum" /><select name="policyid" id="policyid"></select>

下面给出一种实现方式。

前端js代码：

                $("#flightnum").change(function(){$.ajax({url: "/flightBase/flightnum/"+$("#flightnum").val(),dataType: "json",success: function(data){$('#policyid').get(0).options.length = 0;$('#policyid').append('<option value="">请选择</option>');$.each(data, function(i, obj) {var option = $('<option />');option.val(obj.policyid);option.text(obj.policyname);$('#policyid').append(option);});     },error:function(){alert("Error");}});});

当flightnum输入框的值发生改变后，policyid的下拉选择框就会发生改变。

$('#policyid').get(0).options.length = 0;//的作用是先清空下拉列表框。

如果只是页面第一次加载完成时，就生成下拉框，而且只生成这一次，则上面这行代码可以不用写。直接把ajax的代码写在$(function(){

//写在这里就可以了

$.ajax({

});

})

后端实现：

    @RequestMapping("/flightnum/{flightnum}")@ResponseBodypublic FlightBase findOne(@PathVariable("flightnum") String flightnum){QueryObject qo = new QueryObject();qo.setCompanyid( userUtilService.getBelongto());List<Policy> policylist  = policyService.query(qo);Map<String, Object> map = new HashMap<String, Object>();for(int i=0;i<policylist.size();i++){map.put(i+"", policylist.get(i));}return JSON.toJSONString(map);}

后台使用的是mybatis框架，QueryObject是自定义的查询对象，用来传递查询参数。

jq实现动态下拉选择框相关推荐

4.下拉选择框，弹出框。滚动条，（frame切换、多窗口切换，很重要，常用）等等，面试重要
文章目录 target 下拉选择框弹出框-- driver.switch_to.alert 滚动条 frame切换-- 重要多窗口切换截屏验证码 cookie target 下拉选择框--se ...
Axure：实现下拉选择框
功能实现:下拉选择一.元件需求 1)三个文本标签.一个动态面板.一个中继器 2)组合元件将中继器复制粘贴放入到动态面板中将另外两个文本标签复制粘贴放入中继器中并调整位置整理组成 ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
python select模块安装_python+selenium select下拉选择框定位处理方法
一.前言总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询: 二.直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPa ...
自定义组合控件：下拉选择框
Spinner 自定义组合控件之下拉选择框项目概述下拉选择框主要是通过在EditText 下用PopupWindow 动态显示ListView 控件来实现的.下拉选择框可以方便用户的输入效率,以此 ...
js下拉 selenium_selenium的下拉选择框
今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...
html下拉选择框箭头改为年,CSS自定义select下拉选择框的样式(不用其他标签模拟)...
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
UI标签库专题十一：JEECG智能开发平台 DictSelect (数据字典下拉选择框)
1. DictSelect (数据字典下拉选择框) 1.1. 参数属性名类型描述是否必须默认值 typeGroupCode string 字典分组编码是 null field str ...

jq实现动态下拉选择框

jq实现动态下拉选择框相关推荐

最新文章

热门文章