原生JS实现为select标签添加option内容

最新推荐文章于 2022-01-07 19:28:05 发布
最新推荐文章于 2022-01-07 19:28:05 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 项目练习 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C2_tr_Grow_up/article/details/115245386
版权
这篇博客介绍了如何在JavaScript中动态生成并添加多个option到select元素中，以解决HTML中手动添加大量option标签的问题。
摘要由CSDN通过智能技术生成

今天练习需要给select加入下拉内容于是但是option标签要很多，于是用js解决。

不多bb代码如下

City();
// 设置一个空函数拼接option
var allHtml = "";
function City(){
   
	// 包含省份的函数，有条件可从后台获取
	var arr = ["上海"
最低0.47元/天 解锁文章
墨码
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select2动态填充数据（option普通版），初始赋值
hangGe0111的博客
12-29 2813
1.代码(普通版) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0
js添加select下默认的option的value和text的方法
10-25
主要介绍了js中创建html标签、添加select下默认的option的value和text，很实用，需要的朋友可以看看
原生JS给SELECT添加OPTION选项
凯凯王的技术生涯
04-05 9064
var cateList = eval(ajaxResult);  cateField.innerHTML = '';  for(var idx in cateList) {      var option = document.createElement("option");      option.value = cateList[idx].id;      option.innerHTML ...
js select 增加option
IT的专栏
07-15 529
无标题文档 function getTest(){    var array=[1,2,3];    var options="";    for(var i in array){       options+=""+array[i]+"\n";      // alert(options);         }     document.getElementById(
JS给select标签添加数据
XiaoqiangNan的博客
10-11 4888
使用js给select标签添加数据（在数据库中查询出来的数据）：  以获取供应商表为例     //使用jstl表达式获取到所有的供应商 并使用foreach遍历     //js代码     var name="${provider.providername }"; //获取供应商名称     var providername="${requestScope.order.go
原生js获取select被选中的option
qq_30908729的博客
03-29 1409
原生js获取select被选中的option 解决方法： <script type="text/javascript"> function test(){ var select = document.getElementById("select"); var str = []; for(i=0;i<select.length;i++){ ...
JS实现select选中option触发事件操作示例
10-18
对于纯JavaScript的实现，我们可以创建一个`<select>`元素，并为它添加`onchange`事件监听器。当用户改变选中的`<option>`时，`gradeChange`函数会被调用。在该函数中，我们通过`getElementById`获取`<select>`元素...
js获取select标签选中值的两种方式
12-11
在JavaScript和jQuery中，获取`<select>`标签中选中选项的值是常见的操作，尤其在处理表单数据时。以下将详细介绍这两种方法，并提供一些相关的扩展知识。 ### JavaScript 获取选中值 #### 方法一：原生 ...
JavaScript操作select元素和option的实例代码
10-22
`addOption`函数用于向指定`select`元素添加新的`option`。它需要三个参数：`selectID`（`select`元素的`id`）、`value`（`option`的值）和`text`（`option`显示的文本）。通过`getElementById`找到`select`元素，...
select option带自定义图片
09-19
然而，原生的`<option>`元素并不支持直接添加图片，但通过一些JavaScript和CSS的技巧，我们可以实现自定义带有图片的`<option>`效果。以下是一个关于如何在`<select>`和`<option>`中添加自定义图片的详细教程。 ...
select框插入option原生JS
qq_43551196的博客
10-29 289
var select = document.getElementById('select'); var node = document.createElement(&quot;OPTION&quot;); node.text = a[i]; select.appendChild(node);
js端拼接select下拉选，并且给指定option加颜色
qq_39822451的博客
08-28 2118
//js端拼接select下拉选，并且给指定option加颜色 //需要效果：点开下拉选时候，将指定的文字设置成红色 var optionStr = '<option value="">&nbsp;</option>'; for (var i = 0; i < data.length; i++) { var value = data[i].id; var text; if (a==b) { text = "...
下拉菜单11+原生js获取select下拉框的selected的option项
我的博客
08-13 4363
对于以下select标签，获取当前选择的值得方式如下： <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> code: 一：javascript原生的方法 1:拿到select对象： var myselect=document.getElementById("test"); 2：拿.
js获取select标签选中的值，拼接option选项
weixin_44249754的博客
05-09 1936
if(data.length == 0) { //获取下拉框选中值的页面表示值 var useDepart = $('#useDepartmentsId option:selected').text(); //拼接option选项 var selectHtml = '<option value="">请选择</option>'; selectHtml += '<option value="' + useDepartmentsId + '">' + useDepa
原生select默认文字提示
热门推荐
余光的博客
09-26 1万+
一、普通下拉列表 <select> <option value="Volvo">Volvo</option> <option value="1">栗子</option> <option value="2">香蕉</option> <option value="3">苹果</...
原生js操作option
weixin_30556161的博客
08-21 155
1 <script type="text/javascript"> 2 // 1.动态创建select 3 function createSelect() { 4 var mySelect = document.createElement("select"); 5 mySelect....
操作select option
02-22 481
1.动态创建select      function createSelect(){       var mySelect = document.createElement("select");           mySelect.id = "mySelect";            document.body.appendChild(mySelect);      }2.添加选项
JS两种增加SELECT 下的option方法
van416521的专栏
11-09 8413
第一种方法: window.onload = function() { var opt = document.createElement('option'); opt.appendChild(document.createTextNode("上海")); opt.setAttribute("value","C3"); sel.appendChild(opt); };
javascript中通过jquery向select选项框中添加新选项
liaomingwu的专栏
01-07 5558
javascript中通过jquery向select选项框中添加新选项
用原生js实现模糊搜索的select
最新发布
06-07
好的，我可以为你提供一种实现模糊搜索的select的方法。首先，我们需要一个带有选项的select元素和一个输入框来输入搜索的关键字。然后，我们需要使用JavaScript来实现模糊搜索的功能。 以下是一个简单的实现模糊...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值