看网上很多动态的下拉菜单，都是用的div实现。
我这个是对select进行更改，更简单一些。
html文件
<!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 runat="server">
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
</head>
<body>
<div>
<select id="input1" name="input1" type="text" style="width:100px" ></select>
</div>
</body>
<script type="text/javascript">
$("#input1").focus(function(){
//$("#input1").empty();
//看是否有选项，有则不加载
if(this.options.length>0)
return ;
//加载动态数据，这里直接用js文件，里面是个json数据，可以从后台得到
$.getJSON("xin.js",function(data){
$.each(data.items,function(i,item){
$("<option value='"+item.dm+"'>"+item.mc+"</option>").appendTo("#input1");
});
});
});
</script>
</html>
js文件
{"items":[{"dm":"1","mc":"werwe"},{"dm":"2","mc":"122"}]}
分享到：
相关推荐
本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框，以提升用户在交互时的体验。 首先，我们需要了解 `select` 元素在HTML中的基本用法。`<select>` 标签用于创建一个下拉列表，用户可以...
6. 动态添加元素到页面中：在需要的时候，使用jQuery的`.append()`方法将创建好的select元素添加到页面的指定容器中。这个操作会把新的HTML字符串插入到页面的DOM中，从而使得select元素变得可用。 7. 绑定事件到...
综上所述，jQuery实现的select互斥联动是一种常见的前端交互设计，通过监听和处理事件，动态调整下拉列表的选项，以满足不同场景下的用户需求。在理解基本原理后，可以根据具体项目需求进行扩展和优化。
本文主要讲解了如何使用jQuery动态地遍历select元素，并为其赋值。这是一项非常实用的技术，尤其在动态网站开发中，经常会遇到需要根据不同的数据动态更新下拉列表选项的情况。 知识点一：遍历和选择select元素中的...
《jQuery封装Select实现自定义样式插件：jquery.easydropdown.min.js》 在Web开发中，Select元素是常用的数据选择控件，但其默认样式通常较为单一，无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富...
本文将详细讨论如何使用jQuery来实现这一功能，同时提供一个自编的简单实用的模拟select效果的代码示例。 首先，让我们理解原生HTML `select` 元素的基本功能。`<select>` 元素用于创建一个下拉列表，用户可以从中...
"jQuery实现select样式美化 jQselect.js" 就是这样一种解决方案，它利用jQuery库来对传统的`<select>`标签进行样式定制，以提供更加丰富的视觉效果。 jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件...
**jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件，它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中，使得传统的单选...
《jQuery超级Select插件v4.0版本详解》 在Web开发中，下拉选择框（Select）是最常见的表单元素之一，但在某些场景下，普通的Select可能无法满足复杂的交互需求，例如多选、搜索过滤、自定义样式等。这时，jQuery...
在"cool的JQuery自定义select"中，jQuery被用来动态地控制和展示select元素。这个插件通过CSS样式和JavaScript功能，将传统的select转换为具有自定义外观和交互效果的组件。 这个插件的主要特点可能包括： 1. **...
4. **动态加载**：对于大量数据，Select2 支持动态加载，只在用户需要时请求服务器数据，减少页面加载时间。 5. **分组显示**：可以将选项按照预设的类别进行分组，使用户更容易理解和选择。 6. **可扩展性**：...
总的来说，`jQuery手机下拉框select` 是通过jQuery Mobile库实现的一种优化移动端用户体验的解决方案。它提供了丰富的样式、交互和功能特性，帮助开发者创建出更符合移动设备需求的下拉菜单。通过理解和应用这些技术...
`jquery.selectlist.js`插件是基于JavaScript库jQuery构建的，jQuery是一个轻量级的、高性能的库，使得开发者能够更容易地进行DOM操作、事件处理、动画效果以及Ajax交互。通过利用jQuery的强大功能，`jquery.select...
接下来，使用jQuery来处理事件和动态展示效果。首先，我们需要监听`click`事件，当用户点击`#customSelectWrapper`时，显示或隐藏下拉选项列表。同时，当用户点击`<li>`时，更新输入框的值并关闭下拉列表。以下是一...
* 模拟select * @param {box,tiggle} * @param box 父级别容器[模拟select最外围标签] * @param tiggle 展开事件 [*click | mouseover | 其他dom事件] * @return object 返回对象本身 * @disription 节点(html)内部...
5. **数据源多样化**：Select2不仅可以绑定到静态的HTML `<option>` 元素，还可以从Ajax请求、JavaScript数组或任何能返回数据的函数中获取选项，这为动态加载和异步数据处理提供了便利。 二、使用方法与示例 1. *...
**jQuery Select2插件详解** Select2是一款基于jQuery的增强型下拉选择框插件，它极大地改进了原生HTML `<select>` 元素的用户体验和功能。标题中的"select2(jquery)插件下载"指的是这个插件的获取途径，通常通过...
此外，jQuery还可以用来动态改变select元素的状态，比如选中项的高亮效果，或者在选项被选择后更新其他页面元素。 文件`index.html`是项目的主网页文件，其中包含了HTML结构，可能包括一个或多个`<select>`元素，...
在本文中，我们将深入探讨jQuery库以及Select2插件的使用，如何利用它们来实现一个功能丰富的下拉框，特别是用于复选功能。这将帮助Web开发者创建更加用户友好的界面，提高用户体验。 jQuery是一个广泛使用的...