忙里偷闲，抽空写了一个HTML Select 下拉菜单的AJAX功能扩展，自己觉得用起来还蛮方便，写个blog备忘一下，同时也可以拿出来个大家共享，这里只给出demo,详细请看代码的注释，但愿我的注释够详细。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Yoyoor</title>
<script type="text/javascript" src="js/mootools-release-1.11.js"></script>
<script type="text/javascript" src="js/mootoolsAjaxExt.js"></script>
<script type="text/javascript" src="js/selectExt.js"></script>
</head>
<body>
<select id="ajaxSelect" url="data.js"></select>
<select id="ajaxSelect2"></select>
<select id="ajaxSelect3" url="data.js"></select>
<script type="text/javascript">
window.onload = function(){
var s1, s2, s3;
getHTMLSelectElement("ajaxSelect").loadByAjax();
getHTMLSelectElement("ajaxSelect2").loadByAjax({
url:"data.js",
remainInx: 0,
sort: function(){return -1},
complete: function(){
getHTMLSelectElement("ajaxSelect3").loadByAjax();
}
});
}
</script>
</body>
</html>
motools lib的下载地址：http://motools.net 请注意版本号
分享到：
相关推荐
然而，有时为了实现更复杂的功能或者更好的视觉效果，开发者可能会选择使用JavaScript来模拟`<select>`下拉菜单。这种方法可以提供更多的自定义选项，如动画效果、多级下拉、异步加载等。 ### 1. 常规HTML `<select...
`divselect.js`是核心插件文件，它扩展了`div`元素的功能，使其具有下拉菜单的行为。这个文件包含了一系列函数和方法，用于初始化、显示、隐藏下拉菜单以及处理用户选择。开发者可以通过查看源代码理解其工作原理，...
在网页开发中，"select下拉带模糊搜索功能"是一个常见的需求，特别是在用户需要从大量选项中快速选择某一特定项时。这个功能提高了用户体验，使查找和选择变得更加便捷。本项目通过HTML、JavaScript（可能包括jQuery...
jQuery Select下拉菜单插件是基于jQuery库的扩展，它通过CSS3动画和自定义样式，为传统的HTML `<select>` 元素带来了更美观、更易用的交互体验。这个插件通常用于改善浏览器默认的下拉样式，使其更具吸引力和响应性...
"select下拉列表显示图片内容"就是这样一个特例，它通过一些技术手段实现了在下拉选项中嵌入图片。 要实现这个效果，通常有以下几种方法： 1. **CSS和JavaScript**： 使用CSS来定制`<option>`元素的样式，并通过...
在创建联动下拉菜单时，我们会用到`<select>`和`<option>`标签来定义下拉列表。例如： ```html <select id="parentSelect"> <option value="option1">Option 1 <option value="option2">Option 2 </select> ...
在"jquery select下拉菜单美化搜索框代码"项目中，我们可能会涉及到以下核心知识点： 1. **jQuery基础**：熟悉jQuery的基本选择器、事件绑定、DOM操作和动画方法是必要的。例如，`$(selector).click(function() {.....
在网页设计中，为了提供更好的用户体验和视觉效果，开发者经常会选择使用自定义的HTML和CSS来模拟`<select>`元素的下拉菜单。本篇将深入探讨如何利用`div`元素来实现`select`下拉菜单的美化效果，以及相关的前端技术...
在实际项目中，ZTree不仅可以应用于下拉菜单，还可以用作文件管理、组织架构展示、权限控制等多种场景。通过深入学习和熟练掌握ZTree的API和配置选项，可以打造出高效且用户体验良好的树形交互界面。
"jquery下拉菜单select二级菜单导航"是这个话题的核心，它涉及到如何使用jQuery库来增强HTML `<select>` 元素，使其具备多级导航功能。在本文中，我们将深入探讨如何创建这样的下拉菜单，以及实现二级菜单的关键技术...
对于下拉菜单，HTML5中的<select>元素通常用来创建传统的选择列表，但通过添加自定义数据属性和JavaScript，我们可以创建更复杂的交互式下拉菜单。 CSS3是层叠样式表的第三版，带来了许多新特性，如选择器扩展、...
在本文中，我们将深入探讨如何使用layui框架中的tree模块创建一个功能完备的树形下拉菜单。layui是一款轻量级的前端UI框架，它提供了丰富的组件和API，使得开发者能够快速构建美观且响应式的Web应用。在“layui树形...
在这种场景下，`Select2` 库是一个非常优秀的工具，它能够帮助开发者创建功能强大、易于使用的多选及搜索下拉菜单。本文将详细介绍如何利用 `Select2` 实现全国省市区三级联动的效果。 `Select2` 是一个开源的 ...
在实际应用中，这种地区联动下拉菜单还可以进一步扩展和优化，比如增加搜索功能，支持自定义数据源，或者适配移动设备的触摸操作。同时，为了提高用户体验，还可以添加错误处理机制，处理如未选择上级地区就尝试选择...
Bootstrap Select 是一个基于 jQuery 的插件，专门设计用于扩展 Bootstrap 框架的下拉菜单功能，使其支持多选选项。这个插件由 Silvio Moreto 创建，版本为 20160104，从文件名可以推测，这是该插件在2016年1月4日的...
`jquery.editable-select`是一个jQuery插件，它提供了可编辑的下拉选择框，自带搜索功能。使用这个库可以大大简化开发过程。首先，你需要在页面中引入jQuery和`jquery.editable-select`的JS和CSS文件。然后，通过...