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

本文介绍了一个使用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>

 


<script language="javascript">
function test() {
 var  str = '123456@3';
 var indexNumber = str.lastIndexOf('@');
 var departId = str.substring(indexNumber + 1,str.length);
 alert('departId = ' + departId);
}

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 deleteAll()
{
 var size = document.form1.select2.options.length;
 //alert('select2 size=   '+size);
 var v_select = document.form1.select2.options;
 
 if(size >0)
 {
  //alert('长度:  '+v_select);
  for(var ii=0;ii<size;ii++)
  {
   document.form1.select2.options.remove(0);
  }
 }
 var opt=document.createElement ("OPTION");
 opt.text="                         ";
 opt.value="";
 opt.selected=false;
 document.form1.select2.options.add(opt);
}

function submitForm()
{
 var temp = document.form1.select2.length;
 
 //alert(document.form1.textContent.trim());
 if(temp <2)
 {
  alert('请选择人或部门!!!!');
 }
 else
 {
  if(trim())
  {
   for (var c=0;c<temp ;c++ )
   {
    document.form1.select2[c].selected = true;
   }
   form1.submit();
  }
  else
  {
   alert('发送内容不能为空!!!');
  }
 } 
}


//判断是否有值(正则式)
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+"&nbsp;&nbsp;&nbsp;&nbsp;"+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>");
   }
  %>
            <!--
   <option value="200008037071810@2">叶平 1239485768999</option>
      <option value="200008000022470@1">毛云加 1239485768999</option>
      <option value="200008000046200@1">朱敏敏 1239485768999</option>
      <option value="200008000055910@1"> 瞿跃红 1239485768999</option>
      <option value="200008000239270@2">朱惠英 1239485768999</option>
      <option value="200008000590020@1">沃文芸 1239485768999</option>
   <option value="200211153082200@1">黄琤 1239485768999</option>
   <option value="200008000046110@1">张殷 1239485768999</option>
   <option value="200008000046300@1">马敬之 1239485768999</option>
  
   <option value="1">system_dept</option>
   <option value="2">general_dept</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="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
        </select></td>
      </tr>
      <tr>
        <td><input type="button" value="删除一条记录" onClick="javascript:remove();"></td>
      </tr>
      <tr>
        <td><!--<input type="button" value="    显示   " onClick="javascript:display();">-->
                    </td>
      </tr>
      <tr>
        <td><input type="button" value="  全部删除  " onClick="javascript:deleteAll();"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</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>

---------------------------------------------------listview.java文件---------------------

get/set( pid , zjhm , xm , dept_id , telno )

数据库结构:

PID    VARCHAR2(15) Y                        
ZJHM   VARCHAR2(18) Y                        
XM     VARCHAR2(10) Y                        
DEP_ID VARCHAR2(5)  Y                        
TELNO  NUMBER(13)   Y    

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值