Html 中的select标签动态生成

最新推荐文章于 2024-07-16 15:41:31 发布
最新推荐文章于 2024-07-16 15:41:31 发布
阅读量2.8k 收藏
点赞数
文章标签： html date function object button input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxshandle/article/details/569482
版权

以下是3种动态生成的方法

<!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' οnchange='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' οnchange='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' οnchange='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" οnclick="option();">
<span id="optionTime">test</span><br><BR>

Method I:<font color=blue>object.innerHTML</font><br>
<Input type="Button" value="Object InnerHTML" οnclick="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" οnclick="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>

hxshandle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html query动态为select加入选项,HTML标签 select 里 动态添加option
weixin_29696999的博客
06-07 1474
HTML标签 select 里 动态添加option:☆ var today = new Date();var yearNow = today.getFullYear();var optiongYears_className = [yearNow, yearNow+1];var $selyear = $("select#classNameYear_add");$.each(optiongYe...
html5 动态获取select 值_10个好用的 HTML5 特性
weixin_28910411的博客
11-22 1034
文末送书在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。? detais 标签标签向用户提供按需查看详细信息的效果。如果需要按需向用户显示内容，简单的做法就是使用此标签。默认情况下，它是收起来的，打开后，它将展开并显示被隐藏的内容。事例：ClickHeretogettheuserdetails#NameLocationJob...
动态创建select
会写代码的心理咨询师
06-20 867
var val = obj.options[index]=new Option("新文本","新值");//序号，取当前选中选项的序号。//序号，取当前选中选项的序号。//序号，取当前选中选项的序号。obj.add(new Option("文本","值"));//index,要删除选项的序号，这里取当前选中选项的序号。6.获得选项option的文本。3.删除所有选项option。4.删除一个选项option。5.获得选项option的值。
html 动态设置下拉选项
u013558123的博客
02-18 1021
html 动态设置下拉选项
html标签＜select＞ 动态加载 动态选中 不用jquery
weixin_43151193的博客
11-10 941
html标签 动态加载 动态选中 不用jquery 直接通过html来实现动态加载select以及根据传入值来预先动态选中。先直接上代码 <select class="wgt_txt_01"> <c:forEach items="${categoryList}" var="category" varStatus="status"> <c:choose> <c:when test="${category.name == instru
html页面select怎么用,HTML在Select具体的使用说明
weixin_35778603的博客
06-03 1256
CalicoTortieSiameseBMWPorscheMercedes宝马保时捷大奔附：一些Select的技巧1.动态创建selectfunction createSelect(){var mySelect = document.createElement("select");mySelect.id = "mySelect";document.body.appendChild(mySelect...
JQuery动态加载select下拉列表添加option数据代码参考
RoadToTheExpert的专栏
02-02 1457
发现以前的动态加载select的代码无效，部分网上搜回来的一些代码也有问题。最近开发时需要做一个动态加载HTML列表框的功能，遇到一些麻烦。重新搜索和整理了一下，写成一个完整的参考例子 记录下来。复制下面代码保存为一个html文件打开运行就能测试效果。具体代码细节自行研究。
表格里面使用js添加select标签，并用js动态添加slected标签里面option
人称笔帝林恒的博客
08-27 2764
最近做项目的UI时，遇到这样的需求： 1.动态添加表格的行数，并将值或取出来； 2.在动态添加的表格中，动态加入select标签； 3.动态加入select标签内的option值； 4.初始化复选框的选中状态； 以上就是大概的需求，笔者初学者，而且是偏向后端研发，对前端的框架了解不多，研究了一天左右，最终通过JQuery实现，如有错误，望指教！ 以下代码仅供参考： HTML代码： ...
jquery html动态生成select标签出问题的解决方法
10-26
用jquery,json从后台获取一个列表，然后用一个动态生成的select标签显示出来，结果出现错误，下面为大家分享个不错的解决方法，喜欢的朋友可以参考下
动态生成html标签
07-12
本文将深入探讨如何在ASP.NET中动态生成HTML标签，并结合`AJAX`与数据库进行交互。 首先，`.NET`框架提供了`System.Web.UI.HtmlControls`和`System.Web.UI.WebControls`命名空间，这两个命名空间包含了大量用于创建...
jsp中htmlselect标签的用法
08-10
`jsp`中的`html:select`标签主要用于创建HTML表单中的下拉选择列表。这个标签在Struts框架中尤其常见，因为它与ActionForm对象的属性紧密关联，方便数据的提交和回显。以下是对`html:select`标签的详细解释和使用...
HTML中的select标签如何使用.docx
11-22
HTML中的`<select>`标签是构建交互式网页表单的重要元素，它允许用户从预定义的选项中选择一个或多个值。在HTML中，`<select>`标签通常与`<option>`标签配合使用，用于创建下拉列表。下面将详细介绍`<select>`标签的...
Jquery+Ajax实现Select动态定数据
热门推荐
今天进步一点点~~
05-06 5万+
接着上次的高级查询。下拉框中的字段都是在前台写好的。这对于系统的灵活性来说，是很大的一个弊端。 解决思路： 在数据库中建立类型字典式表。将下拉框需要添加的项，在数据库表里中文、英文名称对应起来。 下拉框动态绑定数据库表中需要字段。
js 操作select和option
y541397839的专栏
12-09 881
<br />1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option function addOption(){ //根据id查找
html下拉框动态设置默认值
qq_41622603的博客
03-13 4509
&lt;option value = "N" ${STATUS=="N"?'selected':''}&gt; 例: &lt;select&gt; &lt;c:forEach items="${list}" var="list"&gt; &lt;option value="${list.value}" ${object.value==
动态给select赋值
candy_tity的博客
03-20 8271
当点击页面中的一些元素，会改变select的值，这样的情况比较多见。代码如下：<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <style type="text/css"> sele
html select动态赋值
Luxika的专栏
11-21 1330
var positionIds = $("savePerformanceWorkflowExamineResearch_performanceWorkflowExamine_positionId"); positionIds.options.length = 1; positionIds.options[0].selected = "selected"; DWR...
Html_Css问答集(12)
最新发布
白话魔法师
07-16 745
html与css学习中的一些疑问，问答中轻松获取知识。
select标签动态生成option
06-28
### 回答1： 可以使用JavaScript动态生成select标签的option选项。具体步骤如下： 1. 获取select标签的DOM元素，可以使用document.getElementById()或者document.querySelector()方法。 2. 创建option元素，可以使用document.createElement()方法。 3. 设置option元素的value和text属性，可以使用option.value和option.text属性。 4. 将option元素添加到select标签中，可以使用select.appendChild()方法。 示例代码如下： HTML代码： ``` <select id="mySelect"></select> ``` JavaScript代码： ``` var mySelect = document.getElementById("mySelect"); var options = ["选项1", "选项2", "选项3"]; for (var i = ; i < options.length; i++) { var option = document.createElement("option"); option.value = i + 1; option.text = options[i]; mySelect.appendChild(option); } ``` 以上代码会动态生成一个包含三个选项的select标签。 ### 回答2： select标签是HTML表单常用的一个标签，用于提供用户一个下拉框选择的选项。在使用select标签时，经常需要动态生成option选项，以满足不同的需求。 动态生成option选项可以通过使用JavaScript来完成，具体步骤如下： 1. 获取到select标签的DOM对象，可以使用document.getElementById()方法或者jQuery库的选择器方法来获取DOM对象。 2. 清空select标签中之前的所有option选项，可以使用selectObject.innerHTML=""来清空。 3. 通过循环生成新的option选项，可以使用for循环或者forEach()方法来遍历数据，根据遍历的每一项数据生成一个新的option选项，并将其添加到select标签中。生成新的option选项可以使用createElement()方法来创建，然后使用innerHTML或者textContent属性来设置option选项的值和文本。 示例代码如下： HTML代码： ```html <select id="mySelect"></select> ``` JavaScript代码： ```javascript //获取select标签的DOM对象 var mySelect = document.getElementById("mySelect"); //清空select标签中之前的所有option选项 mySelect.innerHTML = ""; //模拟数据 var data = [ { value: "1", text: "选项1" }, { value: "2", text: "选项2" }, { value: "3", text: "选项3" }, { value: "4", text: "选项4" }, { value: "5", text: "选项5" } ]; //循环生成新的option选项 data.forEach(function(item) { var option = document.createElement("option"); option.value = item.value; option.textContent = item.text; mySelect.appendChild(option); }); ``` 以上代码将动态生成一个包含5个选项的下拉框，每个选项的value和text值分别为1到5和“选项1”到“选项5”。其他数据也可以按照同样的格式进行动态生成。 ### 回答3： 在HTML中，<select>标签用于创建下拉列表。其包含许多<option>标签，用于指定下拉列表中的选项。在某些情况下，我们需要在代码中生成这些选项。为此，我们可以使用JavaScript编写一些代码。 首先，我们需要获取<select>元素。我们可以使用getElementById()方法，这需要给<select>元素指定一个id属性。例如，我们可以将<select>元素定义为： ``` <select id="mySelect"></select> ``` 然后，我们可以使用以下JavaScript代码获取<select>元素： ``` var selectElement = document.getElementById("mySelect"); ``` 接下来，我们需要动态生成<option>元素。我们可以创建一个数组，存储我们需要添加到下拉列表中的选项。例如，我们可以定义： ``` var options = ["选项1", "选项2", "选项3"]; ``` 然后，我们可以使用for循环迭代数组，为每个选项创建一个新的<option>元素，并将其添加到<select>元素中。例如，我们可以编写以下代码： ``` for (var i = 0; i < options.length; i++) { var optionElement = document.createElement("option"); optionElement.text = options[i]; selectElement.add(optionElement); } ``` 这将创建一个新的<option>元素，并设置其文本为数组中的当前选项。然后，我们将该元素添加到<select>元素中，以使其出现在下拉列表中。 반복문을 모두 실행하고 나면, 최종적으로 다음과 같은 HTML 코드가 생성됩니다. ``` <select id="mySelect"> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select> ``` 这是通过动态生成<option>元素实现的，这为我们提供了一种灵活的方式来动态修改下拉列表选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值