本文提供在不刷新页面的前提下，动态生成select选项的
目前比较主流的三种方案。并且提供简单效率测试，网页制作人员可以
根据自己需要选择。
由于时间问题，我没有能写文章说明一下，但是我提供我写的全部代码。
希望有兴趣的同行研究一下。
代码写的应该是很详细的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body{font-family:Courier New, Courier}
select{font-size:8pt;font-family:Courier New, Courier}
input{font-size:8pt;font-family:Courier New, Courier}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var opttext= new Array(1000);
var optvalue=new Array(1000);
function change(object){
opt=object.options[object.selectedIndex];
alert(opt.value+" : "+opt.text);
}
for(i=0;i<opttext.length;i++)
{
opttext[i]="zosatapo"+i;
optvalue[i]="name"+i;
}
function option(){
var opt;
var start;
var end;
start=new Date();
selContainer.innerHTML="";
selContainer.innerHTML="<select id='selShow' onchange='change(this);'></select>";
for(i=0;i<opttext.length;i++)
{ opt=new Option();
//or you may code like below:
//opt=document.createElement("OPTION");
opt.text=opttext[i];
opt.value=optvalue[i];
selShow.options.add(opt);
}
end=new Date();
optionTime.innerText="The Operation Took Time:"+(end.getTime()-start.getTime())+" milliseconds";
}
function object()
{
var start;
var end;
var str="<select id='selShow' onchange='change(this);'>";
start=new Date();
selContainer.innerHTML="";
for(i=0;i<opttext.length;i++)
{
str+="<option value='"+optvalue[i]+"'>"+opttext[i]+"</option>";
}
str+="</select>";
selContainer.innerHTML=str;
end=new Date();
objectTime.innerText="The Operation Took Time:"+(end.getTime()-start.getTime())+" milliseconds";
}
function join()
{
var len=opttext.length;
var arr=new Array(len);
var start;
var end;
start=new Date();
selContainer.innerHTML="";
joinTime.innerText="";
for(i=0;i<len;i++)
{
arr[i]="<option value='"+optvalue[i]+"'>"+opttext[i]+"</option>";
}
selContainer.innerHTML="<select id='selShow' onchange='change(this);'>"+arr.join()+"</select>";
end=new Date();
joinTime.innerText="The Operation Took Time:"+(end.getTime()-start.getTime())+" milliseconds";
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<p align=center><B><FONT SIZE=4>动态生成SELECT选项演示大全</FONT></B></p>
Method I:<font color=blue> options.add()</font><br>
<Input type="Button" value="New Option" onclick="option();">
<span id="optionTime">test</span><br><BR>
Method I:<font color=blue>object.innerHTML</font><br>
<Input type="Button" value="Object InnerHTML" onclick="object();">
<span id="objectTime">test</span><br><BR>
Method I:<font color=blue>object.innerHTML & Array.join()</font><br>
<Input type="Button" value="Array Join" onclick="join();">
<span id="joinTime"><a href=#>test</a></span><br><BR>
<font color=blue>演示效果预览区域：</font><br><br>
<span id="selContainer">
<select id="selShow"><option >Empty</option></select>
</span>
</BODY>
</HTML>
分享到：
相关推荐
动态生成SELECT选项演示大全 动态生成SELECT选项演示大全
在JavaScript编程中，动态生成`select`元素中的`option`是一项常见的需求，特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，同时结合提供的`autoSelect.html`和`autoselect.txt`...
2. 动态生成元素的事件处理难题：在Web开发中，经常遇到需要动态生成页面元素的情况，比如根据用户操作生成新的输入框、按钮或下拉选择框（select）。一旦这些元素被添加到DOM中，为了能够响应用户的交互，我们需要...
动态填充select下拉框的选项值，意味着在表格加载或编辑时，根据服务器返回的数据或特定逻辑来生成并填充这些选项。这个过程通常包括以下步骤： 1. **设置列模型**：在初始化jQGrid时，我们需要为包含下拉框的列...
在这个特定的项目中，“jquery动态生成select工作日列表Workday”是利用jQuery来实现一个功能，该功能可以动态地创建一个SELECT元素，并填充每月周一至周五的工作日日期。 首先，我们需要理解“select”元素在HTML...
### JavaScript 动态生成 Table 及处理 在现代 Web 开发中，动态生成 HTML 元素是一种非常实用的技术，尤其当涉及到数据展示时，如表格（`<table>`）。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。...
这里涉及到汉字转拼音的技术，可以使用JavaScript库如pinyin.js或hanyu-pinyin来处理。在预处理阶段，我们需要遍历所有选项，获取每个选项文本的拼音，并将其存储到相应的选项对象中。 接下来，我们需要覆盖Select2...
如资源名，使用JAVASCRIPT动态创建一个Select元素和text元素
在数据库管理中，UPDATE语句用于修改已存在的数据记录，而SELECT语句则用于查询数据。在某些场景下，我们可能需要从UPDATE语句转换为SELECT语句，以验证更新操作将影响哪些行或者理解更新逻辑。这在调试、数据分析或...
4. 动态生成选项：根据用户选择的父级选项ID，从JSON数据中查找相应的子级选项，并用`append()`方法添加到对应的`select`元素中。 在HTML部分，`index.html`中会包含基本的结构，比如两个`select`元素和一个用于...
本文档将详细阐述如何使用layui框架，结合jQuery和Ajax技术，动态渲染生成select下拉列表中的option选项值的方法。 首先，我们需要了解layui框架。layui是一个前端UI框架，它为开发者提供了一系列的组件，其中就...
动态加载的基本原理是使用AJAX（Asynchronous JavaScript and XML）技术，通过JavaScript与服务器进行异步通信。当用户滚动下拉框或者触发某个事件时，浏览器发送请求到服务器，请求特定范围或特定条件的数据。...
3. **创建select元素**：通过JavaScript动态生成一个模拟的select元素，包括文本输入框和按钮。这些元素将被封装在一个`<div>`中，并添加必要的事件监听器。 ```javascript function editselect(name, size, ...
当下拉菜单显示时，需要动态地生成并填充下拉选项。这通常涉及到遍历预定义的选项数组，并为每个选项创建相应的DOM元素。 #### 四、总结 通过上述步骤，我们可以成功实现一个可编辑的下拉菜单。这种方法虽然比...
为了改善这一情况，开发者们通常会利用JavaScript（JS）和层叠样式表（CSS）来增强Select的视觉效果，创建出更加精美、自定义的选项框插件。本文将深入探讨如何使用JS和CSS来美化经典Select选项框。 首先，我们需要...
主要给大家介绍了关于AngularJS动态生成select下拉框的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用AngularJS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
例如，当用户在第一级选择了一个选项后，可以通过监听`onchange`事件，调用JavaScript函数来清空第二级的`<select>`并根据选择的值动态生成新的选项。 以下是一个简单的示例流程： 1. 初始化：在页面加载完成后，...
6. **动态生成下拉列表**：在某些情况下，我们可能需要根据服务器返回的数据动态生成`<select>`元素。这可以通过循环遍历数据并创建`<option>`元素实现。 在`testWeb`这个文件夹中，应该包含了这个简单示例的HTML和...
当从后台通过JSON格式获取数据，并尝试用这些数据动态生成一个select标签以供用户选择时，可能会遇到一系列问题。这些问题可能表现为select标签不显示，或者select标签出现错误的显示效果。 出现这种问题可能有多...