如何动态增加下拉框列表，下拉框里的内容从js数组里得来？ - ITeye问答

问答首页 → Web前端技术

0 0

如何动态增加下拉框列表，下拉框里的内容从js数组里得来？5

或者下拉框里的内容从数据库中来，如何遍历js数组，想做一个通用查询，用户点击一下就增加一行查询条件输入组合框。

2008年6月26日 09:01

javachs
2
0 0 5

5个答案按时间排序按投票排序

0 0

直接把这段代码粘过去，看看效果就知道了，什么都不说了

2008年6月26日 10:22

wangxin0072000
475
0 0 0

添加评论

0 0

很抱歉，我没测一下，动态增加下拉框的内容按照我第一个写法IE没问题，firefox会出错。
改成这样都可以了。

  var   option   =   document.createElement("option");  
  option.text='11';  
  option.value='22'   ;  
  Input.options.add(option);

2008年6月26日 10:21

hjgundam
442
0 0 0

添加评论

0 0

从js数组中得到：看例子

<html>
<head>
</head>
<body>
<select id="collect" onclick="fun()"></setect>
<option>AAA</option>
<option>BBB</option>
<script type="text/javascript">
var tom=['CCC','DDD']
var collect=document.getElementById("collect")
	var old=collect.innerHTML
	var fun =function(){
	
	var niw=" "
	for(var i=0;i<tom.length;i++){
		niw+='<option>'+tom[i]+'</option>';
	}
	collect.innerHTML=old+niw
	
}
</script>
</body>
</html>

2008年6月26日 10:20

wangxin0072000
475
0 0 0

添加评论

0 0

至于增加一行查询条件，可以利用给table增加一行，然后你把html语言加进去就是了

    var row = queryList.insertRow(queryList.rows.length);     
    var cell = row.insertCell(0);  
    cell.innerHTML = b;

2008年6月26日 10:14

hjgundam
442
0 0 0

添加评论

0 0

这样就可以个下拉框添加内容，你只要遍历你的js数组加进去

<select id="Input"></select>

  var   option   =   document.createElement("option");  
  option.text='11';  
  option.value='22'   ;  
  Input.add(option);

2008年6月26日 10:06

hjgundam
442
0 0 0

添加评论

相关推荐

下拉框选择事件动态加载echart数据: 通常我们会使用JavaScript或jQuery来实现，当用户选择新的下拉框选项时触发异步请求，获取对应的数据。以下是一个简单的示例： ```javascript document.getElementById('dataSelect').addEventListener('change', ...

bootstrap树形下拉框下拉框树形菜单: Bootstrap Tree形下拉框是一种将传统的下拉菜单与树形结构结合的UI组件，它使得在有限的空间内展示层级关系的数据变得更加便捷。这种组件通常用于需要用户从一个多级分类中选择一个选项的情况，例如在组织架构、地区...

select2 动态下拉框插件以及开发心得: 3. **数据源绑定**：select2 支持从静态数组、AJAX请求或远程数据源动态加载选项。这使得在大量数据或者需要实时更新的场景下尤为实用。 4. **多选功能**：通过设置 `multiple` 属性，select2可以实现多选功能，如 ...

下拉框和文本框组合共用-可以输入的下拉框ok: 这可能涉及到数组或对象的操作，以及DOM的动态更新。同时，可能还需要考虑错误处理，例如输入无效字符或无匹配项时的提示。 5. **可访问性**：在设计这种组件时，必须考虑无障碍性（Accessibility）。确保键盘用户...

angularjs指令下拉框: "angularjs指令下拉框"这个主题聚焦...在这个例子中，我们学会了如何创建一个自定义的下拉框指令，它能够动态地从控制器获取数据，显示选项，并能双向绑定选中的值。这种能力对于构建复杂且可复用的前端应用至关重要。

bootstrap树形下拉框下拉框树形菜单（花了一小时修改过的）: 这个组件是基于流行的前端框架Bootstrap和JavaScript库构建的，使得在网页设计中实现树形下拉框变得简单高效。在Bootstrap中，树形下拉框主要依赖于`bootstrap-treeview.js`这个JavaScript插件，它扩展了Bootstrap...

下拉框、下拉控件之Select2内含css和js: 3. **自定义数据源**：你可以通过 AJAX 或 JavaScript 数组为 `Select2` 提供动态数据，使得选项不再局限于静态的 HTML 内容。 4. **可扩展性**：`Select2` 的API允许开发者添加自定义行为，如监听事件、修改默认...

类似于百度的带提示的下拉框: 这种下拉框通常结合JavaScript（JS）技术实现，能够实时响应用户的输入，并动态显示匹配的数据。在描述中提到，随着数据量的增加，性能可能会受到影响，这涉及到前端优化的问题。首先，我们来详细了解一下这种...

jquery 多选下拉框: 它使得编写复杂的JavaScript代码变得简单易行，大大提高了开发效率。 ### 多选下拉框实现原理 1. **HTML结构**：首先，我们需要一个基本的HTML结构，包括一个下拉框（`<select multiple>`）和一个显示选择结果的...

JavaScript实现左右下拉框动态增删示例: 这个示例的实用价值在于，它提供了一种交互式的方式，允许用户动态调整下拉框的选项分布，例如在配置界面或数据筛选场景中，用户可以根据需要在两个列表间移动选项。通过学习这个示例，开发者可以掌握如何使用...

dwr加载下拉框数据: 这个小例子展示了如何使用DWR来动态加载下拉框（Dropdown List）的数据，这种技术在网页应用中非常常见，特别是当需要在用户界面加载时就获取并填充数据的场景。首先，我们需要理解DWR的基本工作原理。DWR允许...

级联下拉框案例: 这可以是硬编码的数组，也可以是从服务器通过Ajax请求获取。在这个案例中，由于没有提及解析XML，我们可能假设数据是以JSON或其他易于处理的格式存储。 5. **更新下拉框**：根据获取的数据动态创建或更新第二个...

下拉框-树.zip: 同时，为了确保用户的选择能够被正确地发送到服务器，开发者可能使用了JavaScript数组来存储选中的值，并在用户完成选择后，通过回调函数传递这些值。回调函数是这个下拉框-树的关键特性之一。它允许开发者在用户...

用JS实现的下拉框美化插件(滑动展开、键盘选择等).zip: 总之，这个"用JS实现的下拉框美化插件"是前端开发中提升用户体验的一个实用工具，它结合了JavaScript的动态特性与HTML的静态结构，实现了丰富的交互功能和自定义样式，使得原本单一的下拉框变得生动且易于使用。...

DropDownList下拉框多选: - 当处理多选下拉列表时，数据源（如数据库、数组或集合）的管理变得尤为重要。你需要确保每个选项都有一个关联的值，以便在提交表单时能够正确处理选定的项。 - 在ASP.NET中，可以使用`DataBind()`方法将数据源...

jQuery Select下拉框关键字匹配查询选择代码.zip: 3. **DOM操作**：在用户输入关键字时，我们需要动态地修改下拉框的内容。这涉及到对DOM的操作，如`.html()`方法用于设置HTML内容，`.append()`用于向元素添加新的子元素。 4. **AJAX异步请求**：为了实现关键字匹配...

jquery开发的可以多选的下拉框: 3. **数据存储**：多选功能通常涉及到数组或对象来存储用户的选择，可以通过`$.data()`来附加数据到DOM元素上，或者使用JavaScript的`localStorage`或`sessionStorage`在浏览器中持久化数据。 4. **DOM操作**：...

flex多选下拉框: 在IT行业中，尤其是在前端开发领域，`flex`布局和`多选下拉框`是常见的交互元素设计。本文将详细探讨这些技术，并结合`checkbox`的使用，展示如何创建一个功能完善的多选下拉框。首先，让我们了解`flex`布局。Flex...

利用Bootstrap Multiselect实现下拉框多选功能: 总的来说，Bootstrap Multiselect 提供了一种优雅的方式，使得在网页中实现下拉框多选变得更加简单。通过结合 jQuery 和 Bootstrap 的强大功能，我们可以轻松地创建具有多选功能的下拉列表，并在需要时获取选中项的...

Ask-but

我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

查看全部排名>>

Global site tag (gtag.js) - Google Analytics