combobox下拉框加载

最新推荐文章于 2022-04-23 19:34:55 发布

XiaoZJun

最新推荐文章于 2022-04-23 19:34:55 发布

阅读量429

点赞数

文章标签： combobox

本文链接：https://blog.youkuaiyun.com/XiaoZJun/article/details/107197306

版权

本文介绍了如何在界面中使用Combobox组件实现动态下拉框加载。通过添加相关jsp界面、实体类、dao操作、CategoryAction控制及XML配置，并结合JavaScript来完成这一功能。最终展示出了界面运行结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

增加界面下拉框，及增加

思路：

在增加界面增加一个combobox组件，形成动态的下拉框加载

代码：

addjsp界面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍新增</title>
   <!--全局样式  -->
<link rel="stylesheet" type="text/css" 
href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css" 
		href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<!-- 主键库源码的jsp文件-->
<script type="text/javascript" 
		src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" 
		src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/book .js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="已下架书籍" style="width:100%;padding:30px 60px;">
    <form id="ff" action="${pageContext.request.contextPath}/book.action?methodName=add" method="post">
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'书名:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input id="cid" name="cid" value="" label="类别" >
            <%--<select class="easyui-combobox" name="cid" label="类别" style="width:100%">--%>
                <%--<option value="1">文艺</option>--%>
                <%--<option value="2">小说</option>--%>
                <%--<option value="3">青春</option>--%>
            <%--</select>--%>
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'作者:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="price" style="width:100%"
                   data-options="label:'价格:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="publishing" style="width:100%"
                   data-options="label:'出版社:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="description" style="width:100%;height:60px"
                   data-options="label:'简介:',required:true">
        </div>
        <%--默认未上架--%>
        <input type="hidden" name="state" value="1">
        <%--默认起始销量为0--%>
        <input type="hidden" name="sales" value="0">
    </form>

    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清空</a>
    </div>
</div>
<script>
    $(function () {
        $('#cid').combobox({
            url:'${pageContext.request.contextPath}/category.action?methodName=list',
            valueField:'id',
            textField:'name'
        });


    });

    function submitForm() {
        $('#ff').form('submit',{
            success:function (param) {
                $('#ff').form('clear');
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }
</script>
</body>
</html>

combobox下拉框的实体类

package com.zhoujun.entity;

public class Category {
	private long id;
	private String name;
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Category(long id, String name) {
		super();
		this.id = id;
		this.name = name;
	}
	public Category() {
		super();
	}
	@Override
	public String toString() {
		return "Category [id=" + id + ", name=" + name + "]";
	}
	
}

dao类

package com.zhoujun.dao;

import java.sql.SQLException;
import java.util.List;

import com.zhoujun.entity.Category;
import com.zhoujun.util.BaseDao;
import com.zhoujun.util.PageBean;

public class CategoryDao extends BaseDao<Category>{
	public List<Category> list(Category category,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {
		String sql = "select * from t_easyui_category";
		return super.executeQuery(sql, Category.class, pageBean);
	}
}

CategoryAction

package com.zhoujun.web;

import java.sql.SQLException;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zhoujun.dao.CategoryDao;
import com.zhoujun.entity.Category;
import com.zhoujun.util.ResponseUtil;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriven;

public class CategoryAction extends ActionSupport implements ModelDriven<Category> {
  private CategoryDao categoryDao =new CategoryDao();
  private Category category =new Category();
@Override
public Category getModel() {
	return category;
}
  


public String combobox(HttpServletRequest req,HttpServletResponse resp) {
	try {
		List<Category> list = this.categoryDao.list(null, null);
		ResponseUtil.writeJson(resp, list);
	} catch (InstantiationException e) {
		e.printStackTrace();
	} catch (IllegalAccessException e) {
		e.printStackTrace();
	} catch (SQLException e) {
		e.printStackTrace();
	} catch (Exception e) {
		e.printStackTrace();
	}
	return null;
}
}

xml配置

> 这里是引用
js

$(function(){
	  var ctx =$("#ctx").val();
	  $('#cid').combobox({
		  url:ctx+'/category.action?methodName=combobox',
		  valueField:'id',
		  textField:'name'
	  });
	})

界面结果:

在这里插入图片描述