三表二级联动菜单，向达人求救！

hk207 2008-04-17 09:49:34 


<html>

<head>

<title>三表二级联动菜单</title>

</head>

<body>

<p>

  <select name="noa" id="a" onChange=""> 

    <option value="" id="" selected>-请选择-</option>

    <option value="aaba" id="a1">000a</option>

    <option value="acba" id="ba">00ba</option>

    <option value="safa" id="c3">0cba</option>

    <option value="ahbc" id="bc">dcba</option>

  </select>

  <select name="nob" id="b" onChange=""> 

    <option value="" id="" selected>-请选择-</option>

    <option value="bbab" id="b1">000b</option>

    <option value="cbec" id="c2">000c</option>

    <option value="ddcc" id="f3">000d</option>

    <option value="eeff" id="e4">000e</option>

    <option value="fgff" id="f5">000f</option>

    <option value="ggfg" id="g6">000g</option>

    <option value="hhgg" id="d7">000h</option>

    <option value="ifdb" id="i8">000i</option>

  </select>

  <br>

  <br>

  

  其中列表noa由数据库表A动态生成，<br>

  列表nob由数据库表B动态生成，其中A表和B表由C表关联，C表有两个字段aID和bID，举例如下：<br>

  aID                        bID<br>

  ------------------------------<br>

  a1                         b1<br>

  a1                         c2<br>

  a1                         f5<br>  

  a1                         i8<br>

  ba                         f3<br>

  ba                         e4<br>

  c3                         d7<br>

  bc                         g6<br>

  bc                         f3<br>

  bc                         c2<br>

  

  —————————————————————————<br>

  要求是：<br>

  列表noa选择000a(a1)的时候，列表nob选项有且只有:-请选择-、000b、000c、000f、000i(b1、c2、f5、i8)；<br>

  列表noa选择00ba(ba)的时候，列表nob选项有且只有:-请选择-、000d、000e(f3、e4)；<br>

  列表noa选择0cba(c3)的时候，列表nob选项有且只有:-请选择-、000h(d7)；<br>

  列表noa选择dcba(bc)的时候，列表nob选项有且只有:-请选择-、000g、000d、000c(g6、f3、c2)；<br>

</p>

<p>（括号内为表C关联的id值）</p>

</body>

</html>
...全文
216 17 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
UltraBejing 2008-04-30
  • 打赏
  • 举报
 回复
好像没那么简单,呵呵.
knowledge_Is_Life 2008-04-30
  • 打赏
  • 举报
 回复
关注 接分
hk207 2008-04-21
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 rushman 的回复:]
啊！
服务器端用的是什么？ASP？
数据库的表具体是如何定义的？
[/Quote]

服务器端用的是aspx
A表有AID和AName、B表有BID和BName、C表有AID和BID(就是A、B表的ID)
rushman 2008-04-21
  • 打赏
  • 举报
 回复
啊！
服务器端用的是什么？ASP？
数据库的表具体是如何定义的？
hk207 2008-04-21
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 rushman 的回复:]
引用 7 楼 hk207 的回复:
关键是C表的数据只是举的一个例子；现在偶就是不知道该怎么从数据库的C表里来弄A、B的联动。

根据数据库生成文本应该会吧？
既然可以生成 html ，那生成一段脚本（变量 itemMap）会有什么问题吗？
[/Quote]

没有生成 html ！那生成一段脚本（变量 itemMap）会有什么问题吗？——很有问题！^_^
rushman 2008-04-21
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 hk207 的回复:]
关键是C表的数据只是举的一个例子；现在偶就是不知道该怎么从数据库的C表里来弄A、B的联动。
[/Quote]
根据数据库生成文本应该会吧？
既然可以生成 html ，那生成一段脚本（变量 itemMap）会有什么问题吗？
hk207 2008-04-21
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 CIT 的回复:]
首先确定一点，你的数据在什么地方？在HTML里面还是数据库里？
不过既然这里是ajax板块，我想应该是数据库里通过ajax获取吧？至少这是我的做法～

先生成selectA，至于其options用后台语言填充还是用ajax这个随意。
修改selectA.onchange()。使其触发ajax申请，将查询条件x传给后台处理。后台根据此条件查询数据库中的表C，然后将结果返回。
在ajax的回调函数中处理返回的数据，将其填充到selectB的options中。

这个…
[/Quote]

数据在什么地方？在数据库里！

完全不懂ajax，郁闷啊……高手帮忙！


[Quote=引用 5 楼 rushman 的回复:]
引用 4 楼 hk207 的回复:
首先要感谢 rushman 兄弟的热心！

可惜的是你给的代码偶还是用不成，所以 才说不行！汗……

可能是你没有仔细看，困惑我的主要是怎么用第三个表（也就是C表）来判断A、B表之间的联动关系！

是啊，我就是根据你的 C 表写的映射变量 itemMap ,然后自动生成第二个 <select> 的。
[/Quote]

关键是C表的数据只是举的一个例子；现在偶就是不知道该怎么从数据库的C表里来弄A、B的联动。
CIT 2008-04-21
  • 打赏
  • 举报
 回复
首先确定一点，你的数据在什么地方？在HTML里面还是数据库里？
不过既然这里是ajax板块，我想应该是数据库里通过ajax获取吧？至少这是我的做法～

先生成selectA，至于其options用后台语言填充还是用ajax这个随意。
修改selectA.onchange()。使其触发ajax申请，将查询条件x传给后台处理。后台根据此条件查询数据库中的表C，然后将结果返回。
在ajax的回调函数中处理返回的数据，将其填充到selectB的options中。

这个方法是在JS+AJAX+PHP结构中使用的，不知道有没有帮助～～
lishnqing 2008-04-21
  • 打赏
  • 举报
 回复
学习了
rushman 2008-04-21
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 hk207 的回复:]
IF rs.bof AND rs.eof THEN
' Do some thing
ELSE

中的' Do some thing
这句是？
[/Quote]
如果需要做某些处理的话：do some thing
如果不需要，就忽略掉。
hk207 2008-04-21
  • 打赏
  • 举报
 回复

IF rs.bof AND rs.eof THEN
' Do some thing
ELSE

中的' Do some thing
这句是？
rushman 2008-04-21
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 hk207 的回复:]
服务器端用的是aspx
A表有AID和AName、B表有BID和BName、C表有AID和BID(就是A、B表的ID)
[/Quote]
你的 HTML 不是动态生成的？
html 中，每个 option 都有各自的 value/id 和显示文本，这和数据库中的表对应不起来——表中只有两个字段。
我稍微变化了一下，写了一段ASP的代码，也没有测试，你参考参考：
<%

DIM conn,connstr,dbFileName

DIM rs

DIM sql



dbFileName = "dbfile.mdb"

SET conn = Server.CreateObject("ADODB.Connection")

connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(dbFileName)

conn.Open connstr

SET rs=server.createobject("adodb.recordset")

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Test select</title>

<script type="text/javascript">

var origBList = {<%

'生成B表的脚本数据

  sql = "select * from [B]"

  rs.open sql,conn,1,1

  

  IF rs.bof AND rs.eof THEN

    ' Do some thing

  ELSE

    Response.Write """" & rs("BID") & """:""" & rs("Bname") & """"

    rs.movenext

    DO WHILE NOT rs.eof

      Response.Write ",""" & rs("BID") & """:""" & rs("Bname") & """"

      rs.movenext

    loop

  END IF

  rs.close

%>};

var origMap = new Array(<%

'生成 C 表的原始映射数据

  sql = "select * from [C]"

  rs.open sql,conn,1,1

  

  IF rs.bof AND rs.eof THEN

    ' Do some thing

  ELSE

    Response.Write "{""" & rs("AID") & """:""" & rs("BID") & """}"

    rs.movenext

    DO WHILE NOT rs.eof

      Response.Write ",{""" & rs("AID") & """:""" & rs("BID") & """}"

      rs.movenext

    loop

  END IF

  rs.close

%>);



var mapData;



// 在浏览器端，根据原始的数据生成实用的映射数据

function initMapData(){

  var item, itemID, itemName;

  mapData = new Object();

  for(item in origMap){

    for(itemID in origMap[item]){

      if(mapData[itemID] == undefined){ mapData[itemID] = new Array(); }

      mapData[itemID].push(origMap[item][itemID]);

    }

  }

}



initMapData();



function clearChildNodes(elem){

  while(elem && elem.hasChildNodes()){

    elem.removeChild(elem.firstChild);

  }

}



function dosomething(event){

  var evt = event || window.event;

  var srcElem = evt.target || evt.srcElement;

  var srcId = srcElem.value;

  var listElem = document.getElementById("blist");

  var optElem;

  var textElem;

  var listItems = mapData[srcId];

  var item;

  

  if( srcElem && listElem && mapData[srcId]){

    clearChildNodes(listElem);

    

    optElem = document.createElement("option");

    textElem = document.createTextNode("--请选择--");

    optElem.appendChild(textElem);

    optElem.setAttribute("value","");

    listElem.appendChild(optElem);

    for(item in listItems){

      optElem = document.createElement("option");

      textElem = document.createTextNode(origBList[listItems[item]]);

      optElem.appendChild(textElem);

      optElem.setAttribute("value",listItems[item]);

      listElem.appendChild(optElem);

    }

  }

}



</script>

</head>

<body>

  <div>

    <select name="noa" id="alist" onchange="dosomething(event)">

    <option value="" selected>-请选择-</option><%

'生成 A 表的选择列表

  sql = "select * from [A]"

  rs.open sql,conn,1,1

  

  IF rs.bof AND rs.eof THEN

    ' Do some thing

  ELSE

    DO WHILE NOT rs.eof %>

      <option value="<%=rs("AID")%>"> <%=rs("AName")%> </option><%

      rs.movenext

    loop

  END IF

  rs.close

      %>

      <option value="a1">000a</option>

      <option value="a2">00ba</option>

      <option value="a3">0cba</option>

      <option value="a4">dcba</option>

    </select>

    <select name="nob" id="blist" onchange=""> 

      <option value="" selected>-请选择-</option>

    </select> </div>

</body>

</html>
rushman 2008-04-20
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 hk207 的回复:]
楼上的不行的，寒……
[/Quote]
这不是你要的吗？
你可能没仔细看吧。用浏览器打开这个文件看看就知道了。
hk207 2008-04-20
  • 打赏
  • 举报
 回复
楼上的不行的，寒……
rushman 2008-04-20
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 hk207 的回复:]
首先要感谢 rushman 兄弟的热心！

可惜的是你给的代码偶还是用不成，所以 才说不行！汗……

可能是你没有仔细看，困惑我的主要是怎么用第三个表（也就是C表）来判断A、B表之间的联动关系！
[/Quote]
是啊，我就是根据你的 C 表写的映射变量 itemMap ,然后自动生成第二个 <select> 的。
hk207 2008-04-20
  • 打赏
  • 举报
 回复
首先要感谢 rushman 兄弟的热心！

可惜的是你给的代码偶还是用不成，所以 才说不行！汗……

可能是你没有仔细看，困惑我的主要是怎么用第三个表（也就是C表）来判断A、B表之间的联动关系！
rushman 2008-04-17
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Test select</title>

<style type="text/css">

  div {margin:2px;}

  body>div {margin:8px; padding:4px; border:solid 2px #e0e0e0;}

</style>

<script type="text/javascript">

var itemMap = {

  "a1":{

    ""   : {value:"",text:"-- 请选择 --"},

    "b1" : {value:"bbab",text:"000b"},

    "c2" : {value:"cbec",text:"000c"},

    "f5" : {value:"fgff",text:"000f"},

    "i8" : {value:"ifdb",text:"000i"}

    },

  "ba":{

    ""   : {value:"",text:"-- 请选择 --"},

    "f3" : {value:"ddcc",text:"000d"},

    "e4" : {value:"eeff",text:"000e"}

    },

  "c3":{

    ""   : {value:"",text:"-- 请选择 --"},

    "d7" : {value:"ffgg",text:"000h"}

    },

  "bc":{

    ""   : {value:"",text:"-- 请选择 --"},

    "g6" : {value:"ggfg",text:"000g"},

    "f3" : {value:"ddcc",text:"000d"},

    "c2" : {value:"cbec",text:"000c"}

    }

  };



function clearChildNodes(elem){

  while(elem && elem.hasChildNodes()){

    elem.removeChild(elem.firstChild);

  }

}

function doSomeThing(event){

  var evt = event || window.event;

  var srcElem = evt.target || evt.srcElement;

  var srcId = srcElem.options[srcElem.selectedIndex].id;

  var listElem = document.getElementById("blist");

  var optElem;

  var textElem;

  var listItems = itemMap[srcId];

  var item;

  

  if( srcElem && listElem && itemMap[srcId]){

    clearChildNodes(listElem);

    

    for(item in listItems){

      optElem = document.createElement("option");

      textElem = document.createTextNode(listItems[item].text);

      optElem.appendChild(textElem);

      optElem.setAttribute("value",listItems[item].value);

      optElem.setAttribute("id",item);

      listElem.appendChild(optElem);

    }

  }

}



</script>

</head>

<body>

  <div>

    <div>这是你要的结果</div>

    <div>但是一定要这样子吗？ option 加上 ID 感觉怪怪的……</div>

    <select name="noa" id="alist" onchange="doSomeThing(event)"> 

      <option value="" selected>-请选择-</option>

      <option value="aaba" id="a1">000a</option>

      <option value="acba" id="ba">00ba</option>

      <option value="safa" id="c3">0cba</option>

      <option value="ahbc" id="bc">dcba</option>

    </select>

    <select name="nob" id="blist" onchange=""> 

      <option value="" selected>-请选择-</option>

    </select>

  </div>

  <div>

    <div>这样行不行？</div>

    <select onchange="doOtherThing(event)">

      <option value="" selected>--请选择--</option>

      <optgroup label="000a">

        <option value="aaba,bbab"> 000b </option>

        <option value="aaba,cbec"> 000c </option>

        <option value="aaba,fgff"> 000f </option>

        <option value="aaba,ifdb"> 000i </option>

      </optgroup>

      <optgroup label="00ba">

        <option value="acba,ddcc"> 000d </option>

        <option value="acba,eeff"> 000e </option>

       </optgroup>

      <optgroup label="0cba">

        <option value="safa,ffgg"> 000h </option>

      </optgroup>

      <optgroup label="dcba">

        <option value="ahbc,ggfg"> 000g </option>

        <option value="ahbc,ddcc"> 000d </option>

        <option value="ahbc,cbec"> 000c </option>

      </optgroup>

  </div>

</body>

</html>
java 扫雷源代码 带有详细的注释
菜鸟练习~~ 加入了“求救”按钮，在无法继续通过计算扫雷时，可以点出此获知随机的一个未标记雷的位置； 加入了计时器； 加入了作弊功能……嘿嘿，按下键盘上的某键，可以知道所有雷的位置，吼吼
向大佬求救！！！到底哪里错了啊
向大佬求救！！！51单片机汇编 ORG 0000H MAIN: MOV R0,#7FH MOV R1,#00H MOV R2,#0FFH MOV R3,#06H MOV R4,#0BH MOV R5,#08H DJNZ R3,FX DJNZ R4,TX AJMP MAIN END FX: MOV P1,R0 MOV P1,R1 DJNZ R5,FXS RET FXS: MOV A,R0 RR A...
pdfplumber 只要一运行就失败 求救！
pdfplumber 只要一运行就失败 求救！
小白求救！opencv3错误： LNK2019 无法解析的外部符号
标题 标题 小白求救！错误 LNK2019 无法解析的外部符号 opencv3 小白求救！错误 LNK2019 无法解析的外部符号 opencv3 本人小白一枚 正在学opencv3 搞出个错误怎么改都搞不掉 求大神指正！ 错误明细： ...
求救！！！！！！

U盘中了病毒，所有的word文档打开全部是乱码，好不容易找到这里，却无论如何无法下载，谁能告诉我咋办啊！！！！！！！！！！！！！！！！！！！！！
JavaScript

87,997

社区成员

224,708

社区内容

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

加载中

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

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

+ 用AI写文章