Fatal编程技术网
  • java/
  • Java JSP/Jquery-组合框下拉列表，使用图像从数据库动态加载

Java JSP/Jquery-组合框下拉列表，使用图像从数据库动态加载

java jquery css jsp spring-mvc

Java JSP/Jquery-组合框下拉列表，使用图像从数据库动态加载,java,jquery,css,jsp,spring-mvc,Java,Jquery,Css,Jsp,Spring Mvc,在我的web应用程序中，我需要显示从数据库动态加载的下拉列表。 我需要从DB加载用户列表。每个用户的“访问级别”为1或2。 当用户显示在下拉列表中时，他们的姓名旁边必须有一个图像。 （如“访问级别”1的“绿色”勾选）和（访问级别2的红十字）。 我已检查此url。 但我需要根据从DB加载的访问级别显示图像。 我想这可以通过JQuery/CSS实现 任何人都可以告诉我们如何做到这一点吗？如果可能，请提供示例代码？考虑到您已经知道如何显示图像，您只需要根据访问级别设置正确的图像url 鸟瞰 if(ac

在我的web应用程序中，我需要显示从数据库动态加载的下拉列表。
我需要从DB加载用户列表。每个用户的“访问级别”为1或2。
当用户显示在下拉列表中时，他们的姓名旁边必须有一个图像。
（如“访问级别”1的“绿色”勾选）和（访问级别2的红十字）。
我已检查此url。
但我需要根据从DB加载的访问级别显示图像。
我想这可以通过JQuery/CSS实现

任何人都可以告诉我们如何做到这一点吗？如果可能，请提供示例代码？

考虑到您已经知道如何显示图像，您只需要根据访问级别设置正确的图像url

鸟瞰

if(accesslevel==1)
Image.path="greetick.png";
else
Image.path="redcross.ong";
我没有JSP的知识，但是，我可以为您提供足够的信息，这样您就可以继续使用您的知识

HTML部分：

<html>
<head>
<title>Sample Title</title>
<script src="msdropdown/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />
<script language="javascript">
    $(document).ready(function(e) {
        try {
            $("#webmenu").msDropDown();
        } catch(e) {
            alert(e.message);
        }
    });
</script>
</head>
<body>
<select name="webmenu" id="webmenu">
    //you will need to take this part into the loop of x being count of total users, and loop from first to last
    <option value="<% //output username lowercased here %>" title="<% if(accessLevel == 1){ //printout imagepath for accessLevel = 1 } else if(accessLevel == 2){ //printout imagepath for accessLevel = 2 %>"><% /*output username here*/ %></option>
</select>
</body>
</html>


示例标题
$（文档）.ready（函数（e）{
试一试{
$（“#webmenu”）.msDropDown（）；
}捕获（e）{
警报（e.message）；
}
});
//您将需要将这一部分放入x的循环中，x是总用户数，并从第一个循环到最后一个循环
在网页所需位置编写以下代码，以获取并列出用户列表

rst=stmt.executeQuery("select * from userliat");
<select id="users" name="users">;
<%
String imagePath;
while(rst.next()){
  if(rst.getString("access_level") == "1"){
    imagePath = "greenTick.png";
  }
  else{
    imagePath = "redCross.png";
  }
%>;
<option value="<%= rst.getString("id") %>" title="<%= imagePath %> "><%= rst.getString("user_name") %></option>;
<% } %>
</select>
因为您使用jsp作为视图技术，所以使用核心标记根据访问级别决定是显示绿色记号还是显示红色十字

访问以了解有关核心标记用法的更多信息。不要忘记在项目类路径中包含jstl.jar和standard.jar文件。它们是支持jstl的必要库

看起来您的应用程序是使用spring框架开发的，所以我将试着这样解释

您的JSP代码如下：将其命名为userlist.JSP

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!doctype>
<html>
    <head>
       <script src="${pageContext.request.contextPath}/js/jquery-1.3.2.min.js" type="text/javascript></script>
       <script src="${pageContext.request.contextPath}/js/jquery.dd.js" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/dd.css" />
    </head>
    <body>
        <form:select id="userNames" path="userName" tabindex="10">
            <form:option value="Select User">Select User</form:option>                
            <c:forEach begin="${userlist begin index (0)}" end="${userlist size}" var="i">
                <c:choose>
                    <c:when test="${userNameList.user.accessLevel == 1}">
                        <form:option style="background-image:url(greentick.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option>
                    </c:when>
                    <c:otherwise>
                        <form:option style="background-image:url(redcross.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
        </form:select>
    </body>
</html>
这不是一个完整的答案。我已经尽力解释了。
你试试看。它应该可以工作。

我以前做过类似的事情，我使用了JQuery flexbox插件。它使用起来很简单。我现在没有代码，但是在这里(http://flexbox.codeplex.com/)是一个网站，您可以在其中查找如何实施它。

您已经接受了我的答案。那为什么还要另一笔赏金呢？ 
<script language="javascript">
    $(document).ready(function(e) {
        try {
            $("#users").msDropDown();
        } catch(e) {
            alert(e.message);
        }
    });
</script>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!doctype>
<html>
    <head>
       <script src="${pageContext.request.contextPath}/js/jquery-1.3.2.min.js" type="text/javascript></script>
       <script src="${pageContext.request.contextPath}/js/jquery.dd.js" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/dd.css" />
    </head>
    <body>
        <form:select id="userNames" path="userName" tabindex="10">
            <form:option value="Select User">Select User</form:option>                
            <c:forEach begin="${userlist begin index (0)}" end="${userlist size}" var="i">
                <c:choose>
                    <c:when test="${userNameList.user.accessLevel == 1}">
                        <form:option style="background-image:url(greentick.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option>
                    </c:when>
                    <c:otherwise>
                        <form:option style="background-image:url(redcross.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
        </form:select>
    </body>
</html>

@Controller
public class UserController {

    @RequestMapping(value = "/showUsers", method = RequestMethod.GET)
    public String showUserInfo(Model model) {
        // here you prepare the userList, the list of Users along with information
        // here User can be fetched from DB & values stored in User DTO and then DTO in the list
        List<User> userNameList = new ArrayList<User>();
        userNameList.add(User DTO objects go here);
        model.addAttribute("userNameList", userNameList);
        return "userlist";       // remember this is our jsp name
    }
}

public class User {
    private String userName;
    private int accessLevel;

    // setters & getters of variables
}