`
jwen
  • 浏览: 63193 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

<select> 联动 ajax

    博客分类:
  • java
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<%@ page language="java" import="java.util.*,java.lang.*" contentType="text/html; charset=GBK" pageEncoding="GBK"%>

<HTML>
<HEAD>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta http-equiv="Content-Type" content="text/xml;charset=GBK"/>
<META name="GENERATOR" content="IBM WebSphere Page Designer V3.5 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK rel="stylesheet" href="/doc/theme/normal.css">
<script Language="JavaScript" src="/doc/checkjs/timein.js"></script>
<script language="JavaScript" src="/doc/checkjs/check.js"></script>
<script language="javascript">

function addList(){
         
  var thelist=document.form1.leftlist;
  var theText=document.form1.theText.value;
  var theValue=document.form1.theValue.value;

  var theOption=new Option(theText,theValue);
  var thePostion=thelist.options.length;
   thelist.options[thePostion] =theOption;
 
}
function movlist(a,b){


var folist=document. form1.elements[a];
var tolist=document. form1.elements[b];
var theNum= folist.options.selectedIndex;

while(theNum>=0){

var theText=folist.options[theNum].text;
var theValue=folist.options[theNum].value;
var newOption=new Option(theText,theValue);
var theNum2=tolist.options.length;

tolist.options[theNum2]=newOption;

folist.options[theNum]=null;
theNum=folist.options.selectedIndex;

  }

}
function delLlis(){
    
    var theForm=document.form1;

var formNum1=theForm.leftlist.options.selectedIndex;
   if(formNum1>=0){
theForm.leftlist.options[formNum1]=null;

}
 
var formNum2=theForm.rightlist.options.selectedIndex;
if(formNum2>=0){
theForm.rightlist.options[formNum2]=null;
}
}
        var req;
        window.onload=function(){
        }
       
        function Change_Select()
        {
            var type=document.getElementById('DocumentType').value;
            var url="/doc/servlet/SelectServlet?type="+escape(type);
            if(window.XMLHttpRequest)
            {
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
           
            if(req)
            {
                req.open("GET",url,true);
                req.onreadystatechange=callback;
                req.send(null);
            }
        }
       
        function callback()
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage();
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
       
        function parseMessage()
        {
            var xmlDoc=req.responseXML.documentElement;
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_root=document.getElementById('skill');
            select_root.options.length=0;
           
            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }
        }
</script>

<jsp:useBean id="dataBean" scope="request" class="initBean.BaseBean" />

<jsp:useBean id="uiBean" scope="request" class="initBean.PageBean" />
</HEAD>
<body>
<form name="form1" method="POST">
<br>
<TABLE width="353" border="0" align="center">
<tr>
<td width="309" colspan="2" align="left">
选择视图:
<SELECT fieldflag='Y' width="153" name='DocumentType' onChange="Change_Select()">
<OPTION value=>
</OPTION>
<OPTION value=wsView>
文书视图
</OPTION>
<OPTION value=kjView>
科技视图
</OPTION>
<OPTION value=zpView>
照片视图
</OPTION>
<OPTION value=htView>
合同视图
</OPTION>
</SELECT>
</td>
</tr>
</TABLE>
<table width="353" border="0" align="center">
<tr>
<td height=25 colspan=3>选择字段:(按住ctrl键可多选)</td>
</tr>
<tr>
<td width=119>
<select name="leftlist" id='skill' size="10" style="WIDTH: 119px;color:#666666" multiple="MULTIPLE">
</SELECT>
    </td>
<td width=65 align=center>
<input name="Submit2" type="button" value="添加 &gt;&gt;" onclick="movlist('leftlist','rightlist')" /><BR><BR>
<input name="Submit3" type="button" value="&lt;&lt; 删除" onClick="movlist('rightlist','leftlist')" />
</td>
<td width=119><select name="rightlist"  size="10" multiple="multiple"  style="WIDTH: 119px;color:#666666"></SELECT> </td>
</tr>
<tr>
<td colspan="3" align="center">
<input class=btn type="button" name="B1" value="确  定" onClick="commit(0)">
</tr>
</tr>
</table>
<input type="hidden" name="fieldnames">
</form>
<script language="JavaScript">
function commit(flag)
{
if(check('ok'))
{
window.document.form1.fieldnames.value="";
for (var i=0;i<window.document.form1.length;i++)
{
if(window.document.form1.item(i).fieldflag=="Y")
{
var temp1=window.document.form1.item(i).value;
temp1=YMYTrim(temp1);
if(temp1.length!=0)
{
window.document.form1.fieldnames.value=window.document.form1.fieldnames.value+","+window.document.form1.item(i).name;
window.document.form1.item(i).value=temp1;
}
}
}
var temp2=window.document.form1.fieldnames.value;
temp2=temp2.substring(1);
window.document.form1.fieldnames.value=temp2;
if(flag==0)
document.all.form1.action="/doc/servlet/system_data.viewWS";
document.all.form1.submit();
}
}
</script>
</body>
</html>

package system_data;

import java.io.IOException;
import java.sql.SQLException;
import java.util.Vector;

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

import initBean.BaseBean;

public class SelectServlet extends HttpServlet {

    /**
     * Constructor of the object.
     */
    public SelectServlet() {
        super();
    }

    /**
     * Destruction of the servlet. <br>
     */
    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    /**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     *
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //response.setContentType("text/xml");
        //response.setHeader("Cache-Control","no-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setContentType("text/xml;charset=GBK");
//		response.setCharacterEncoding(arg0)
		response.setCharacterEncoding("GBK");
        BaseBean basebean = new BaseBean();
        String viewType=request.getParameter("type").toString();
        System.out.println(viewType);
        try {
        	String Sql="SELECT EN_NAME,CH_NAME FROM TABINFO WHERE viewType="+"'"+viewType+"'"+" and flag='0'";
			int count = basebean.queryRecordMulti(Sql,2);
			Vector vec = null;
			Vector vecItem = null;
	        String xml_start="<?xml version=\"1.0\" encoding=\"gb2312\"?>"+"<selects>";
	        String xml_end="</selects>";
	        String xml="";
		    vec = basebean.getRecords();
		    System.out.println(vec.size());
		    for(int i=0;i<vec.size();i++){
		    	vecItem=(Vector)vec.elementAt(i);
		    	String s1=((String)vecItem.elementAt(0)).trim();
		    	String s2=((String)vecItem.elementAt(1)).trim();
		    	if(i<2){
		    		xml="<select><value>"+s2+"</value><text>"+s1+"</text></select>";
		    	}else{
		    		xml +="<select><value>"+s2+"</value><text>"+s1+"</text></select>";
		    	}
		    }
		   // out.println("<?xml version=\"1.0\" encoding=\"gb2312\"?>");
		    String last_xml=xml_start+xml+xml_end;
	        response.getWriter().write(last_xml);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
    }

    /**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     *
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doGet(request,response);
    }

    /**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occure
     */
    public void init() throws ServletException {
        // Put your code here
    }

}
分享到:
评论

相关推荐

    联动组件JAVA<select>代码

    在Java Web开发中,联动组件(也称为级联选择或...总之,联动组件JAVA&lt;select&gt;代码涉及到HTML、JavaScript、AJAX、服务器端处理和前端框架等多个技术层面。通过合理的设计和实现,可以为用户提供直观且高效的交互体验。

    双选框 两个<select>标签组成 高效代码清晰

    在IT领域,尤其是在Web开发中,`&lt;select&gt;`标签是一个常用元素,用于创建下拉菜单,让用户在一组预设选项中进行选择。本项目中,我们看到一个创新的应用,即通过两个`&lt;select&gt;`标签来实现类似“双选框”的功能,这在...

    Jquery实现的的动态无刷新的二级联动菜单

    在二级联动菜单的场景中,jQuery可以帮助我们更高效地处理用户与&lt;select&gt;元素的交互,如改变第一级菜单时,无需整个页面刷新,仅更新第二级菜单的内容。 接下来,AJAX(Asynchronous JavaScript and XML)是构建...

    Query实现的<select>动态二级联动菜单

    本文将详细讲解如何利用jQuery、Ajax和JSON来实现一个无刷新的动态二级联动菜单,该功能基于`&lt;select&gt;`元素,提供优秀的用户体验。 首先,我们需要了解jQuery库,它是一个强大的JavaScript库,简化了DOM操作、事件...

    jquery ajax xml 实现select联动

    本示例中,“jquery ajax xml 实现select联动”指的是利用jQuery的Ajax功能从XML文件中获取数据,动态更新HTML中的&lt;select&gt;元素,实现两个或多个下拉列表之间的联动效果。这种功能在多级分类选择、地区选择等场景中...

    ajax json select 多级联动

    以上就是使用Ajax、JSON和`&lt;select&gt;`实现多级联动的基本流程。在实际项目中,可能还需要考虑错误处理、数据缓存、性能优化等问题。同时,随着前端技术的发展,现代框架如React、Vue等提供了更高效、更便捷的方式来...

    select级联下拉列表

    JavaScript提供了丰富的DOM操作方法,如`getElementById`、`addEventListener`等,可以监听`&lt;select&gt;`的`change`事件,当用户做出选择时触发相应的处理函数。jQuery则简化了这些操作,提供了更简洁的语法,如`$('#...

    三级下拉列表 select 网页 html5

    这时,我们需要使用多个`&lt;select&gt;`标签,并通过JavaScript实现它们之间的联动。 1. **HTML结构**: 创建三个独立的`&lt;select&gt;`标签,每个代表一个级别。添加`id`属性以便于JS操作,并且在每个选项中添加特定的值,...

    ajax实例大全 很实用的!

    &lt;tr&gt;&lt;td&gt;&lt;a href="1.4/select_menu.html"&gt;1.4多级联动菜单&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;a href="1.5/query_step.html"&gt;1.5条件设置向导&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;a href="1.6/word_tip.html"&gt;1.6页面关键词提示&lt;/a&gt;&lt;/td&gt;...

    jQuery ajax 多级联动 下拉框 Demo

    &lt;h2&gt; 省级联动&lt;/h2&gt; &lt;div class="city" &gt; &lt;select id="SelProvince" class="select"&gt;&lt;/select&gt; &lt;select id="SelCity" class="select"&gt;&lt;/select&gt; &lt;select id="SelArea" class="select"&gt;&lt;/select&gt; &lt;select id=...

    二级联动Jquery

    - **`change`事件**: 当用户更改域的内容时发生,通常用于`&lt;select&gt;`和`&lt;input&gt;`元素。 #### 三、代码解析 ##### 1. HTML结构 ```html &lt;select id="province"&gt; &lt;option&gt;----&lt;/option&gt; &lt;option&gt;&lt;/option&gt; ...

    js 省市区select 三级联动(全国城市三级联动下拉列表)

    &lt;select id="province"&gt;&lt;/select&gt; &lt;select id="city"&gt;&lt;/select&gt; &lt;select id="district"&gt;&lt;/select&gt; ``` 3. **JavaScript实现**: - **加载初始数据**:在JavaScript中,加载JSON数据到内存中。 - **填充省份...

    jquery实现select互斥联动

    &lt;title&gt;jQuery Select 互斥联动&lt;/title&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;select id="select1"&gt; &lt;option value="1"&gt;选项1&lt;/option&gt; &lt;option value="2"&gt;...

    利用JS与HTML实现地级市的简易的二级联动

    在`&lt;select&gt;`标签内部,`&lt;option&gt;`标签用于定义各个选项。例如,我们可能会有一个省份的`&lt;select&gt;`元素: ```html &lt;select id="province"&gt; &lt;option value="省份1"&gt;省份1&lt;/option&gt; ... &lt;/select&gt; &lt;select id=...

    html二级联动效果

    首先,创建两个`&lt;select&gt;`元素,分别代表一级和二级联动的下拉列表。例如: ```html &lt;select id="category"&gt; &lt;option value="1"&gt;一级分类1&lt;/option&gt; &lt;option value="2"&gt;一级分类2&lt;/option&gt; ... &lt;/select&gt; ...

    jQuery表单省市区城市三级联动特效代码

    2. 当第一个&lt;select&gt;(省份)的值改变时,使用jQuery的$.ajax或$.getJSON方法发送异步请求到服务器,获取对应省份的市列表。 3. 在接收到服务器返回的数据后,清空第二个&lt;select&gt;(城市)的选项,然后根据数据动态...

    ajax三级联动菜单

    1. **禁用默认行为**:为了避免在Ajax请求完成前多次发送请求,可以在`onchange`事件中暂时禁用当前`&lt;select&gt;`。 2. **错误处理**:确保处理网络错误或服务器返回的非200状态码。 3. **用户体验**:在请求期间显示...

    select2插件联动查询用到的css和js文件

    1. **初始化Select2**:在DOM加载完成后,使用JavaScript对你的`&lt;select&gt;`元素进行Select2初始化。例如: ```javascript $(document).ready(function() { $("#select1").select2(); $("#select2").select2(); }...

    Ajax联动菜单

    2. **JavaScript事件绑定**:为每个`&lt;select&gt;`标签绑定事件监听器,当用户更改选择时,触发相应的Ajax请求。 3. **PHP后端处理**:设置PHP脚本处理前端发送的请求,查询数据库并返回相应数据。例如,`get2.php`脚本...

    JQ+XML实现洲、国家、省、市三、四级联动

    &lt;select id="continent"&gt;&lt;/select&gt; &lt;select id="country"&gt;&lt;/select&gt; &lt;select id="province"&gt;&lt;/select&gt; &lt;select id="city"&gt;&lt;/select&gt; ``` 当用户在某一级别选择一个选项时,我们需要更新下一级别的选项。这可以通过...

Global site tag (gtag.js) - Google Analytics