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

  • Post author:
  • Post category:其他




项目场景:


主要用于为民族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>


js

    //获取民族列表外加设置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")
	@ResponseBody
	public 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



版权声明:本文为weixin_44320224原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。