Html中Select的用法(多选人员和部门)

最新推荐文章于 2025-06-19 03:39:14 发布

hooligan000112003

最新推荐文章于 2025-06-19 03:39:14 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： JS技术文章文章标签： html string listview function javascript button

本文链接：https://blog.youkuaiyun.com/hooligan000112003/article/details/603635

JS技术文章专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Java与Oracle数据库进行交互的应用实例，通过JSP页面实现员工信息的展示及部门信息的检索，并利用JavaScript实现了前端的选择操作与数据处理。

<%@ page import="java.sql.*" %>
<%@ page contentType="text/html; charset=GBK" %>
<%@ page import="java.util.*"%>
<%@ page import="entity.*"%>

<%/*!
public String toChi(String input) {
  try {
   byte[] bytes = input.getBytes("ISO8859-1");
   return new String(bytes);
  }catch(Exception ex) {
  }
  return null;
}
*/
%>

<%
String PID = "";
String xm = "";
String deptId = "";
String telno = "";
String zjhm = "";
String dept_id = "";
String dept_name = "";

List listEmployee = new ArrayList();
List listDept = new ArrayList();

try{
  Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
  String url="jdbc:oracle:thin:@10.1.2.103:1521:webtest";
  //orcl为你的数据库的SID
  String user="wsbs";
  String password="wsbs";
  Connection conn= DriverManager.getConnection(url,user,password);
  Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);

  String sql = "select pid,zjhm,xm,dep_id,telno from star_listview";
  String sql_dept = "select DEPT_ID,DEPT_NAME from star_dept";

  ResultSet rs=stmt.executeQuery(sql);


  while(rs.next())
  {

   listview vo = new listview();

   vo.setPid((String)rs.getString("pid"));

   vo.setXm((String)rs.getString("xm"));

   vo.setDept_id((String)rs.getString("dep_id"));

   vo.setTelno((String)rs.getString("telno"));

   vo.setZjhm((String)rs.getString("zjhm"));

   listEmployee.add(vo);

   out.println("PID: "+rs.getString("pid"));
   out.println("XM:   "+rs.getString("xm"));
   out.println("Dept_id: "+rs.getString("dep_id"));
   out.println("Telno: "+rs.getString("telno"));
   out.println("Zjhm: "+rs.getString("zjhm")+"<br>");

   vo = null;

  }

  rs=stmt.executeQuery(sql_dept);

  out.println("-------------部门----------------<br>");
  while(rs.next())
  {
   dept dept1 = new dept();
   dept1.setDept_id(rs.getString("DEPT_ID"));
   dept1.setDept_name(rs.getString("DEPT_NAME"));

   out.println("部门ID：　　"+rs.getString("DEPT_ID"));
   out.println("部门名称： "+rs.getString("DEPT_NAME")+"<br>");
   listDept.add(dept1);
   dept1 = null;
  }
  rs.close();
  stmt.close();
  conn.close();
}catch(Exception e)
{

}
%>

<html>
<head>
<title>无标题文档</title>

function remove() {
var selectIndex = document.form1.select2.selectedIndex;

//alert(selectIndex);
var I_temp = parseInt(selectIndex);
//alert(I_temp);
//alert(I_temp);
//alert(isNaN(selectIndex));
if(I_temp != -1 && I_temp != 0)
{
document.form1.select2.options.remove(selectIndex);
}
}

function display() {
var selectIndex = document.form1.select1.selectedIndex;//获取选择的序列
var datas1 = form1.select1.options;
var opt=document.createElement ("OPTION");
opt.text = datas1[selectIndex].text;
opt.value = datas1[selectIndex].value;
alert('text = ' + datas1[selectIndex].text);
alert('value = ' + datas1[selectIndex].value);

}

function add() {
var selectIndex = document.form1.select1.selectedIndex;//获取选择的序列
var datas1 = form1.select1.options; //datas1 为select1

var hasRec = false;

if(selectIndex != -1){   //当选择select1时
  if (!isDepart(datas1[selectIndex].value)) {   //如果是部门
   for (var i = 0; i < datas1.length; i++) {

    if (selectIndex == i) {
     continue;
    }
    if (getDepartId(datas1[i].value) == datas1[selectIndex].value) {  //判断是否是这个部门的人员

     hasRec = false;
     for(var j=0;j<document.form1.select2.length;j++)  //判断是否select2中有重复的
     {
      //alert(datas1[i].value+'    ||    '+datas1[i].text+'   ||    '+document.form1.select2[j].value);

      if(hasRec)
       break;

      if(datas1[i].value == document.form1.select2[j].value)
      {
       //alert('重复 '+datas1[i].text+'    '+document.form1.select2[j].text);
       hasRec = true;
      }
      else
       //alert('不重复'+datas1[i].text+'    '+document.form1.select2[j].text);
       hasRec = false;

     }
     if(! hasRec)
     {
      var opt=document.createElement ("OPTION");
      opt.text = datas1[i].text;
      opt.value = datas1[i].value;
      opt.selected=false;
      document.form1.select2.options.add(opt);
     }
    }
   }
  } else //如果是个人
  {
   if(form1.select2.options.length<1)  //select2为空时：
   {
    var opt=document.createElement ("OPTION");
    opt.text=document.form1.select1[selectIndex].text;
    opt.value=document.form1.select1.value;
    opt.selected=false;
    document.form1.select2.options.add(opt);
   }
   else    //不为空，比较是否select2已经有了
   {
    var flag = 0;  //for的标志
    var exitFor = 0;   //一样退出标志
    for(var j=0;j<form1.select2.options.length;j++)
     {
      if(exitFor == 1)
       break;
      //alert('select2: '+form1.select2[j].value+'   select1: '+form1.select1[selectIndex].value+'   exitFor : '+exitFor);
      if(form1.select2[j].value != form1.select1[selectIndex].value)
      {
       //alert('不一样');
       flag = 1;
      }
      else
      {
       //alert('一样，退出！！');
       exitFor = 1;
       flag = 0;
      }
      //alert('flag ='+flag+'    exitFor: = '+exitFor);
     }
     if(flag == 1)
     {
       var opt=document.createElement ("OPTION");
       opt.text=document.form1.select1[selectIndex].text;
       opt.value=document.form1.select1.value;
       opt.selected=false;
       document.form1.select2.options.add(opt);
     }
    }
  }
}
}

function isDepart(value) {//判断是否是个人，如果是，返回tur,是部门，返回flase
if (value.indexOf('@') != -1) {
return true;
} else {
return false;
}
}

/*Copy
function add() {
var selectIndex = document.form1.select1.selectedIndex;//获取选择的序列
var datas1 = form1.select1.options;
var opt=document.createElement ("OPTION");
opt.text = datas1[selectIndex].text;
opt.value = datas1[selectIndex].value;

document.form1.select1.options.remove(selectIndex);
document.form1.select2.options.add(opt);
}*/

//获取部门的departIdeg getDepartId('200008000046110@1') 返回1
function getDepartId(str) {
var indexNumber = str.lastIndexOf('@');
//alert(indexNumber);
var departId = str.substring(indexNumber + 1,str.length);
//alert('------'+departId);
return departId;
}

function display() {
var selectIndex = document.form1.select2.selectedIndex;
var D_temp = parseInt(selectIndex);
if(D_temp != -1)
{
var datas = form1.select2.options;
//alert('select2 text = ' + datas[selectIndex].text+'value = '+datas[selectIndex].value+' size= '+document.form1.select2.length);
}
}

//判断是否有值（正则式）
function trim() {

    var temp = document.form1.textContent.value.replace(/(^/s*)|(/s*$)/g, "");
if(temp == "")
  return false;
else
  return true;
}

</script>
</head>
<body>

<%/*
String s_value = "";
String[] temp = (request.getParameterValues("select2")==null)?null:(String[])request.getParameterValues("select2");
//System.out.println("----");
out.println("<br>提交后：<br>");
if(temp != null)
{
  for(int k=1;k<temp.length;k++)
  {
   s_value = temp[k];
   //out.println("@: "+s_value.indexOf('@')+"==============");;
   out.println("pid: "+s_value.substring(0,s_value.indexOf("@")));
   out.println("dept_id: "+s_value.substring(s_value.indexOf("@")+1,s_value.length())+"<br>");
   //out.println(temp[k]);
  }
}
out.println("<br>内容：　　"+toChi((String)request.getParameter("textContent")));
*/
%>

<form name="form1" method="post" action="insertlist.jsp">
<p>
    <table width="731" border="0" align="center">
      <tr>
        <td width="231" rowspan="8"><select name="select1" size="15">
            <%

   for(int k=0;k<listEmployee.size();k++)
   {
    listview v1 = (listview)listEmployee.get(k);

    PID = v1.getPid();
    xm = v1.getXm();
    dept_id = v1.getDept_id();
    telno = v1.getTelno();
    zjhm = v1.getZjhm();

    out.println("<option value='"+zjhm+"@"+dept_id+"'>"+xm+"    "+telno+"</option>");

   }
   for(int j=0;j<listDept.size();j++)
   {
    dept temp_dept = (dept)listDept.get(j);
    deptId = temp_dept.getDept_id();
    dept_name = temp_dept.getDept_name();

out.println("<option value='"+deptId+"'>"+dept_name+"</option>");
   }
  %>
            
        </select></td>
        <td width="170"><input type="button" value="     >>    " onClick="javascript:add();"></td>
        <td width="316" rowspan="8"><select name="select2" size="15" multiple>
            <option value="">                         </option>
        </select></td>
      </tr>
      <tr>
        <td><input type="button" value="删除一条记录" onClick="javascript:remove();"></td>
      </tr>
      <tr>
        <td>
                    </td>
      </tr>
      <tr>
        <td><input type="button" value=" 全部删除 " onClick="javascript:deleteAll();"></td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td colspan="3">
          <div align="left">
              <p>
              <textarea name="textContent" cols="80" rows="10"></textarea>
                <input type="button" value=" 确定 " name="确定" onclick="javascript:submitForm();">
                  </p>
              </div></td>
      </tr>
    </table>
</form>
</body>
</html>