急：请问如何在不刷新页面的情况下，当一个下拉列表改变时，改变别一个下拉列表的内容

dreammoci 2004-05-14 12:16:21
请问如何在不刷新页面的情况下，当一个下拉列表改变时，改变别一个下拉列表的内容（而这个被改变的下拉列表的内容是要从数据库里拿出来的）
...全文
141 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
songm 2004-06-24
  • 打赏
  • 举报
 回复
不知道小鱼儿是用哪种方法来解决的
zdmaster 2004-05-14
  • 打赏
  • 举报
 回复
又是联动问题
如：下拉框1内容是
1 分红
2 万能

数据表 tbl_xx字段如下
id nameType
1 a
2 b
3 a
4 b
现在如何选择下拉框1中的“分红“ 把数据表中的nameType='a'的值赋予下拉框2，
选择“万能”把把数据表中的nameType='b'的值赋予下拉框2，



<select name="t1" id="t1" onChange="changelocation(document.form1.t1.options[document.form1.t1.selectedIndex].value)">
<option selected value="">选择内容</option>
<option value="1">分红</option>
<option value="2">万能</option>
</select>

<select name="a1" id="a1" style="width:100">
<option selected value="">选择类型</option>
</select>

<%
dim count
set rs=server.createobject("adodb.recordset")
sql="select * from tbl_xx"
rs.open sql,connstr,1,1%>
<script language="JavaScript">
var onecount;
onecount=0;
subcat = new Array();
<%
count = 0
do while not rs.eof
%>
subcat[<%=count%>] = new Array("<%= trim(rs("newtype"))%>","<%= trim(rs("id"))%>");
<%
count = count + 1
rs.movenext
loop
rs.close
%>
onecount=<%=count%>;

function changelocation(locationid)
{
document.form1.a1.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.form1.a1.options[document.form1.a1.length] = new Option(subcat[i][1], subcat[i][0]);
}
}

}
</script>
wanghr100 2004-05-14
  • 打赏
  • 举报
 回复
用XMLHTTP实现的.

select.asp

<script language="vbscript">
Function bytes2BSTR(vIn)
Dim strReturn,i,ThisCharCode,innerCode,Hight8,Low8,NextCharCode
strReturn = ""
For i = 1 To LenB(vIn)
ThisCharCode = AscB(MidB(vIn,i,1))
If ThisCharCode < &H80 Then
strReturn = strReturn & Chr(ThisCharCode)
Else
NextCharCode = AscB(MidB(vIn,i+1,1))
strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
i = i + 1
End If
Next
bytes2BSTR = strReturn
End Function
</script>
<script language="JavaScript">
/*
* 思路:通过XMLHTTP发出请求返回数据.再对数据进行处理.
* XMLHTTP返回的格式是"字符1,字符2,字符3".再到客户端分析.构建Select
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-14 15:01
*/
function getData(str)
{
//通过XMLHTTP发出请求返回数据.
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
oBao.open("POST","demo.asp?t1="+str,false);
oBao.send();
sdata = bytes2BSTR(oBao.ResponseBody);
//alert(sdata)
Javascript:buildSel(sdata,document.all.t2);
}
function buildSel(str,sel)
{
//接收到数据,构建Select,先清除原来的信息.
sel.options.length=1;
var arrstr = new Array();
arrstr = str.split(",");
for(var i=0;i<arrstr.length;i++)
{
sel.options[sel.options.length]=new Option(arrstr[i],arrstr[i])
}
}
</script>
<!--#include file="conn.asp"-->
<select name="t1" id="t1" OnChange="JavaScript:getData(this.value)">
<option selected value="">选择内容</option>
<%
strSQL = "Select distinct WEBAPP from WEBAccess order by WEBAPP"
set rsASP = Server.CreateObject("ADODB.Recordset")
rsASP.Open strSQL, conn
while not rsASP.EOF%>
<option value="<%=rsASP("WEBAPP")%>"><%=rsASP("WEBAPP")%></option>
<%rsASP.movenext
wend%>
</select>
第二个是：<select name="t2" id="t2">
<option selected value="">选择内容</option>
</select>


demo.asp

<!--#include file="conn.asp"-->
<%
t1=Request("t1")
strSQL = "Select distinct WEBASP from WEBAccess where WEBAPP='"&t1&"'"
set rs = conn.Execute(strSQL)
outstr = ""
set rsASP = Server.CreateObject("ADODB.Recordset")
rsASP.Open strSQL, conn
while not rsASP.EOF
outstr=outstr&rsASP("WEBASP")&","
rsASP.movenext
wend
Response.Write Left(outstr,Len(outstr)-1)
%>


conn.asp

<%
dim conn
dim connstr
on error resume next
connstr="DBQ="+server.MapPath("data.mdb")+";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};"
set conn=server.CreateObject("ADODB.CONNECTION")
conn.open connstr
%>

数据库data.mdb
表WEBAccess
id,自动编号
WEBAPP,文本
WEBASP,文本.
ZHGUY 2004-05-14
  • 打赏
  • 举报
 回复
不刷新页面的话，可以考虑一次把数据全部取出来，事先用不到的先存起来。我这里有个没和数据库连接的。

<html>
<head>
<title></title>

<script language="javascript">

function ToParent()
{
if(form.checked_person.options.length <=0 )
{
alert("当前select里没有值");
return;
}
if(window.opener)
{
for(var i = 0 ; i < form.checked_person.options.length ; i ++)
{
var value = form.checked_person.options[i].innerText ;
window.opener.AddSelectItem(value);
}
}
window.close();
}

function leftmov(){
tempTotal=0;
for(t=0;t<form.all_person.length;t++)
if(form.all_person.options[t].selected)
tempTotal++;
if(tempTotal==0){
alert("您没有选择！");
return false;
}
i=0;
while(i<form.all_person.length){
if(form.all_person.options[i].selected){
var TempOption = new Option(form.all_person.options[i].text,form.all_person.options[i].value);
form.checked_person.add(TempOption);
form.all_person.remove(i);
}
i++;
}
}
function rightmov(){
var tempTotal=0;
for(t=0;t<form.checked_person.length;t++)
if(form.checked_person.options[t].selected)
tempTotal++;
if(tempTotal==0){
alert("您没有选择");
return false;
}
i=0;
while(i<form.checked_person.length){
if(form.checked_person.options[i].selected){
var TempOption = new Option(form.checked_person.options[i].text,form.checked_person.options[i].value);
form.all_person.add(TempOption);
form.checked_person.remove(i);
}
i++;
}
}
function sort()
{
if(form.sel_name.options[form.sel_name.selectedIndex].text=="人员")form.all_person.outerHTML="<select id=all_person size=5 style=background-color:white;width:140px;border:1px solid #999999;color:#666666;><option value=东方不败>东方不败</option><option value=永远不败>永远不败</option></select>"
if(form.sel_name.options[form.sel_name.selectedIndex].text=="角色")form.all_person.outerHTML="<select id=all_person size=5 style=background-color:white;width:140px;border:1px solid #999999;color:#666666;><option value=浏览者>浏览者</option><option value=操作者>操作者</option></select>"
if(form.sel_name.options[form.sel_name.selectedIndex].text=="部门")form.all_person.outerHTML="<select id=all_person size=5 style=background-color:white;width:140px;border:1px solid #999999;color:#666666;><option value=软件部>软件部</option><option value=财务部>财务部</option></select>"
if(form.sel_name.options[form.sel_name.selectedIndex].text=="职位")form.all_person.outerHTML="<select id=all_person size=5 style=background-color:white;width:140px;border:1px solid #999999;color:#666666;><option value=经理>经理</option><option value=员工>员工</option></select>"
}
sort(all_person)
</script>
</head>
<body>
<form action="" name="form" id="form">
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr height="36"><td colspan="3">
<select name="sel_name" size="1" style="background-color:white;width:140px;border:1px solid #999999;color:#666666;" onchange="sort()">
<option value="1">人员</option>
<option value="2">角色</option>
<option value="3">部门</option>
<option value="4">职位</option>
</select></td></tr>
<tr height="96">
<td width="45%" align="center"><select size="5" id="all_person" name="all_person" style="background-color:white;width:140px;border:1px solid #999999;color:#666666;"><option value="东方不败">东方不败</option><option value="永远不败">永远不败</option></select></td>
<td align="center">
<input type="button" name="left" value="->" onclick="leftmov()"><br>
<input type="button" name="right" value="<-" onclick="rightmov()"><br>
</td>
<td width="45%" align="center"><select size="5" id="checked_person" name="checked_person" cols="20" style="background-color:white;width:140px;border:1px solid #999999;color:#666666;"></select></td>
</tr>
<tr><td align="center" colspan="3"><input type="button" value="确定" name="press" onclick="ToParent()"></td></tr>
</table>
<form>
</body>
</html>
cscer 2004-05-14
  • 打赏
  • 举报
 回复
在页面中放置隐藏的Iframe对象，从数据库中取得数据后可以实现页面局部刷新
dreammoci 2004-05-14
  • 打赏
  • 举报
 回复
各位请帮帮忙。。。。
soonquick 2004-05-14
  • 打赏
  • 举报
 回复
不刷新页面还要从数据库中取？
估计要用iframe了。
或是事先存在静态结构里。
或是xmlhttp
:_)
yoyodd 2004-05-14
  • 打赏
  • 举报
 回复
这个问题我也碰到过，可是不知道怎么办
dreammoci 2004-05-14
  • 打赏
  • 举报
 回复
zdmaster:你好，你的方法我试过了，可是不管用。因为在你拿select * from tbl_xx这个数据库后，都没有条件来对应第一个下拉例表的内容呀。
举个例吧：有这样一个数据库，数据库名为WEBAccess
WEBAPP WEBASP
---------------
2 22
2 33
3 44
3 33
4 55
现在我有两个下拉例表，第一个就是：
<select name="t1" id="t1">
<option selected value="">选择内容</option>
<%strSQL = "Select distinct WEBAPP from WEBAccess order by WEBAPP"
rsASP.Open strSQL, Conn
while not rsASP.EOF%>
<option value="<%=rsASP("WEBAPP")%>"><%=rsASP("WEBAPP")%></option>
<%rsASP.movenext
wend%>
</select>
第二个是：<select name="t1" id="t1">
<option selected value="">选择内容</option>
</select>

而现在我要做的就是，当第一个下拉例表中选择一项时，在第二个下拉例表中，要显示出这个表里相对应的WEBASP字段的内容。

LxcJie 2004-05-14
  • 打赏
  • 举报
 回复
你第二个select中的数据是从后台读的还是从前台可以写的
Vue下拉列表赋值不生效（页面上不刷新）
在一个table表格中，存在两个以上的下拉框，前一个选择值，后边的下拉选项都要改变。vue2对于对象的监听只是浅监听，检测不到内部变化，也就无法触发双向绑定。改变，改变完发现页面上另一个下拉框的选项没有更新。...
MVC5用AJAX实现一个下拉列表的值改变，另一个下拉列表的值跟着变（在不更新整个页面的前提下，且调用后台函数）
本文实现在不更新整个页面的前提下，一个下拉列表的值改变，调用后台的函数获取另一个下拉列表的值，然后只更新另一个下拉列表的页面显示。 代码如下： 1、后台controller获取另一个下拉列表更新后的值的函数： ...
JavaScript html js页面刷新之后下拉菜单选中值不变,在按钮提交后保存下拉列表中值不变
JavaScript html js页面刷新之后下拉菜单选中值不变,在按钮提交后保存下拉列表中值不变 博客分类： javaScript HTMLJavaScript金山  除了下拉列表还有文本框和复选框的,放在文章后边 Html代码 ...
MVC 页面实现ajax刷新联动下拉列表
 一个下拉列表的值改变，刷新另一个下拉列表的值  $(document).ready(function () {  $(".selectChange").change(function () {  $.ajax({  type: "POST",  url: "AJAXGetLi
select2 动态更改下拉选项
首先初期时构筑一个下拉列表 之后根据页面条件，需要改变下拉列表选项的内容。不同条件选项内容不同 初期构筑下拉列表就不详细说了，按正常方式构筑即可。 详细步骤： 当选择页面控件时，触发事件，ajax后台取...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章