项目场景：

主要用于为民族select下拉框动态生成option值，同时在实现编辑功能时，表单中的select下拉框的选中项为后台传过来的数据。

举例：

如下图所示的表单内容，下图的民族和政治面貌select下拉框分别采用了不同的方法来实现设置选中项。

代码：

民族的select下拉框的实现代码（动态添加option项同时设置下拉框的选中项）
jsp

  <div class="layui-inline"><label class="layui-form-label">民族</label><div class="layui-input-inline"><select id="edit_nation" class="layui-input"placeholder="请输入民族" name="nation"></select></div></div>

还有下面这个只能写在jsp页面

<script>var stu = "<%=request.getAttribute("sn") %>"
</script>

    //获取民族列表外加设置select初始值$.ajax({url:'/getNation.action',dtatType:'json',async:true,success:function (data) {//第一个添加的为选中值//console.log(stu)$('#edit_nation').append(new Option(stu,stu));$.each(data,function(index,item){if(item.text!=stu){$('#edit_nation').append(new Option(item.text,item.id));//继续往下拉菜单里添加元素}})form.render('select');//这个一定要有}})

controller

 @RequestMapping(value="/getNation.action")@ResponseBodypublic List<ComboboxModel> getnation(){String[] item ={"汉族","蒙古族","回族","藏族","维吾尔族","苗族","彝族","壮族","布依族","朝鲜族","满族","侗族","瑶族","白族","土家族",  "哈尼族","哈萨克族","傣族","黎族","傈僳族","佤族","畲族","高山族","拉祜族","水族","东乡族","纳西族","景颇族","柯尔克孜族",  "土族","达斡尔族","仫佬族","羌族","布朗族","撒拉族","毛南族","仡佬族","锡伯族","阿昌族","普米族","塔吉克族","怒族", "乌孜别克族",  "俄罗斯族","鄂温克族","德昂族","保安族","裕固族","京族","塔塔尔族","独龙族","鄂伦春族","赫哲族","门巴族","珞巴族","基诺族"};List<ComboboxModel> models=new ArrayList<>();for (int i=0;i<item.length;i++) {models.add(new ComboboxModel(item[i],item[i]));}return models;}

下面这个是获取需要修改的学生的基本信息传到表单

 @RequestMapping(value = "/editStudent.action")public String editStudent(HttpServletRequest req, @RequestParam("sid") String sid) {Studentinfo student = studentService.findStudentById(sid);System.out.println(student);req.setAttribute("s", student);req.setAttribute("sn", student.getNation());//!!!注意return "/StudentView/editStudent";}

接下来这个方法比较简单，但是仅适用option项的数量固定且比较少，仅需要修改jsp内容（原本下拉选择中内容因为涉及zhengzhi内容，被打回修改了一下，我用“水果”来代替了这部分内容）

        <div class="layui-inline"><label class="layui-form-label">你喜爱的水果：</label><div class="layui-input-inline"><select id="edit_spolitics" class="layui-input" placeholder="请选择水果" name="spolitics"><c:if test="${s.spolitics!='苹果'}"><option value="苹果">苹果</option></c:if><c:if test="${s.spolitics!='香蕉'}"><option value="香蕉">香蕉</option></c:if><c:if test="${s.spolitics!='菠萝'}"><option value="菠萝">菠萝</option></c:if><c:if test="${s.spolitics!='火龙果'}"><option value="火龙果">火龙果</option></c:if><c:if test="${s.spolitics!='榴莲'}"><option value="榴莲">榴莲</option></c:if><c:if test="${s.spolitics!='其他'}"><option value="其他">其他</option></c:if><option value="${s.spolitics}" selected>${s.spolitics}</option></select></div>

over

Layui实现动态生成select中的option项,同时设置select下拉框选中项相关推荐

axure 9 如何根据下拉框选值，动态展现内容
一.遇到的问题: 在固定的文本框,需要根据选择的下拉框的值,显示不同的内容,通过axure画原型时该如何实现呢? 二.实现步骤 1.在axure中拖如一个下拉框,并填写候选值,如下图所示, 2.在页面 ...
在 jquery repeater 中添加设置日期,下拉,复选框等控件
JQueryElement 更新到了 3.5.1, 今天给大家主要讲下如何在 Repeater 的模板中添加设置一些控件. 由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, ...
今天来马克一下把数据库中的数据动态显示到前台页面下拉框中/默认选中
我知道方法应该有很多,但是我觉得我接下来说的方法还是很简单的. 首先最最重要的就是在前台页面页面头部写上 <%@taglib prefix="c" uri="htt ...
element 下拉框中树节点选中之后不收回下拉框
element UI 下拉框选项包含树节点 <sg-selectref="select"size="small"clearableplaceholder= ...
WPF 中设置Combox下拉框Text 显示值
最近在写一个WPF客户端的一个小程序,其中有个小需求如下: 展示下拉列表里面有树形结构点击下拉子项时同时显示父级和子级文本也就是说在DisplayMember 中有两种显示方式下拉列表显示时,显 ...
在elementUI中使用 el-autocomplete 实现远程搜索的下拉框
1. 在template加入如下标签 <el-form-item label="文章库" :label-width="formLabelWidth" &g ...
element ui 中级联选择器，点击完下拉框收回
在el-cascader标签中添加ref属性,$refs中添加toggleDropDownVisible()方法
php怎么设置学年下拉框_在PHP中，为下拉列表设置“name”属性的方法是（）
在PHP中,为下拉列表设置"name"属性的方法是() 答:为不同下拉列表表单元素分别设置不同的"name"属性值下列有关<威尼斯商人>主旨的探讨 ...
jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

Layui实现动态生成select中的option项,同时设置select下拉框选中项

项目场景：

举例：

代码：

Layui实现动态生成select中的option项,同时设置select下拉框选中项相关推荐

最新文章

热门文章