Question

Dewey Decimal Classification（DDC）是一种非常有用的书籍和文本分类方法。所以我试图找到一个实现它的三重下拉菜单。我用许多不同的方式搜索它，但找不到任何。

很久以前我见过double drop down menu和最近的triple drop down menu，所以我可以自己实现这个。我的幸运猜测是，我不太了解javascript，我可以花费大量的时间来实现它。

因此，我的问题。 您知道在哪里可以找到已经制作的实现DDC的下拉菜单的JavaScript代码吗？此外，当您选择所有字段时，它不需要重定向到另一个页面，因为它是用于提交页面的地方其他领域是必需的。这可能是被黑客攻击的想法。

如果您使用Universal Decimal Classification发布了一些同样有效的代码而不是DDC。我只是喜欢DDC。

如果我在任何地方找不到它，我会尝试自己做并发布代码。

它应该以这种方式工作：第一个下拉列表有以下选项：

计算机科学，信息和一般作品
哲学与心理学
宗教
社会科学
语言
科学（包括数学）
技术与应用科学
艺术与娱乐
文献
历史和地理

如果您选择了“科学”，那么第二个下拉菜单会获取这些值：

科学
数学
天文学＆amp;联合科学
物理
化学＆amp;联合科学
地球科学
古生物;古动物学
生命科学
植物
动物科学/动物

让我们说现在你选择了“物理”，然后第三个下拉菜单会是这样的：

经典力学;固体力学
流体力学;液体力学
气体力学
声音＆amp;相关的振动
Light＆amp; paraphotic现象
热
电力与电力电子
磁
现代物理学

如果选择“加热”，则下拉菜单的值为：opt1 = 5，opt2 = 3，opt3 = 6，因为“加热”对应536。

您可以在Wikipedia中看到完整的结构。

Answer 1

非AJAXy方法只是将所有内容加载到同一页面上。没有AJAX需要菜单，只有非常简单的JavaScript。页面会大得多，但并不令人望而却步，所以我不认为，相关的代码可以放在一个单独的.js文件中，然后可以在客户端缓存，只需要下载一次。

Answer 2

进行搜索我发现this page一个人基本上有一个相同的问题。由名为essential的用户进行响应。他似乎采取了明显的方法，AJAX，原来的提问者似乎认为它成功了。

响应如下：

如果您更喜欢在页面中使用AJAX，则可以实现此目的。为了获得它的基础，这里有一个简单的演示。

此示例包含2个单独的html文档：main.html包含整个脚本，request.html包含其他选项，并将根据请求注入main.html。

以下是main.html的代码：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Demo</title>
<script type="text/javascript">
// <![CDATA[
/* No editing required -
   For demonstrational purposes only. */


// Declaring variables
var ajax, update, xmlData, getOptions;
var obj, select, option;

// This is a simple prototype that will skip the long declaration of ( element.getElementsByTagName( tagName )[reference] ).
// And now can be defined as element.obj( tagName, reference )
obj = Object.prototype.obj = function( tn, ref ) {
   if (( tn ) && ( typeof ref === "number" ) && ( ref !== null )) {
   return ( this.getElementsByTagName( tn )[ ref ] );
   } else {
   return (  this.getElementsByTagName( tn ));
   } 
};

// This is the function reference which is the one who handle's and process the request sent by the XMLHttpRequest object.

// And considered as the most important part of the whole program. 
getOptions = function() {
select = xmlData.responseXML.obj("select", 0)
option = select.obj("option");
oLen = option.length;
   for ( x = 0; x < oLen; x++ ) { document.obj("select")["lists"].remove( x );
document.obj("select")["lists"].add( new Option( option[x].childNodes[0].nodeValue,  option[x].getAttribute("value") ), x );
   }
};

ajax = function ( url ) {
xmlData = null;
   if ( window.XMLHttpRequest ) {
   xmlData = new XMLHttpRequest();
   } else if ( window.ActiveXObject ) {
      try {
      xmlData = new ActiveXObject("Microsoft.XMLHTTP");
      } catch( e ) {
          xmlData = new ActiveXObject("Msxml2.XMLHTTP");
      }
   }
   if ( xmlData !== null ) {
   xmlData.onreadystatechange = getOptions; 
   xmlData.open("GET", url, true);
   xmlData.send( null );
   } else {
     alert("\nYour browser does not support AJAX Request!"); 
   }
};

update = function( sel ) {
sel = ( document.getElementById ) ? document.getElementById( sel ) : document.all.sel;

index = sel.selectedIndex;

ajax( sel.options[index].value );
return;
}
// ]]>
</script>
</head>
<body>
<div id="content">
<form id="ajaxForm" action="#" onsubmit="return false;">
<div>
<select id="lists" name="lists" size="1" onchange="update( this.id );">
<option value="">Default List</option>
<option value="">Default List</option>
<option value="">Defaut List</option>
<option value="request.html">AJAX Demo - Request Lists!</option>
</select>
</div>
</form>  
</div>
</body>
</html>

这适用于therequest.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Request Page</title>
  </head>
  <body>
    <div id="content">
      <form id="frm" action="*" onsubmit="return false;">
        <div>
          <select id="sel" name="sel" size="1" onchange="ajax.listed(this.id);">
            <option value="">Requested List</option>
            <option value="">Requested List</option>
            <option value="">Requested List</option>
            <option value="main.html">AJAX Demo - Default Page!</option>
          </select>
        </div>
      </form>
    </div>
  </body>
</html>

Answer 3

由于javascript'高级'代码与其他编程语言非常相似，所花费的时间比预期的要少。在一些bash脚本的帮助下大约20小时不要手动执行重复性任务。我真的不认为在这里粘贴大约3000行javascript是个好主意，所以，正如我首先要求的那样，我在这里发布了html，并将THIS LINK发布到了ddc.js.此外，您可以测试here并查看其中的说明。这两个链接都来自我的页面，并且有一些轻量级的PHP，我不会发布，因为它不太相关（在NOTE的第二个链接中解释）。

HTML：

<script language="JAVASCRIPT" src="ddc.js" type="text/javascript"></script>
<h1>Dewey Decimal Classification</h1><br><br>
    <form style="text-align: center;" onLoad="msDDC()" name="formDDC" method="POST">
        <select name="classesDDC" style="width: 300px; height: 24px; font-size: 14px;" onChange="changeDivisions()">
        <option value="">Select a class</option>
        <option value="0">0. Computer science, knowledge & systems</option>
        <option value="1">1. Philosophy and psychology</option>
        <option value="2">2. Religion</option>
        <option value="3">3. Social sciences</option>
        <option value="4">4. Language</option>
        <option value="5">5. Science</option>
        <option value="6">6. Technology</option>
        <option value="7">7. Arts</option>
        <option value="8">8. Literature</option>
        <option value="9">9. History, geography & biography</option>
    </select><br><br>
    <select name="divisionsDDC" style="width: 300px; height: 24px; font-size: 14px;" onChange="changeSections()">
        <option value="">Divisions will appear here</option>
    </select><br><br>
    <select name="sectionsDDC" style="width: 300px; height: 24px; font-size: 14px;">
        <option value="">Sections will appear here</option>
    </select><br><br>
    <input type="submit" value="Go!" style="width: 300px; height: 24px; font-size: 14px;">
    </form>

带有杜威十进制分类的三重下拉菜单

3 个答案: