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

最新推荐文章于 2024-01-10 15:41:16 发布

原创

最新推荐文章于 2024-01-10 15:41:16 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

这篇博客介绍了如何在JavaScript中动态生成并添加多个option到select元素中，以解决HTML中手动添加大量option标签的问题。

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

不多bb代码如下

City();
// 设置一个空函数拼接option
var allHtml = "";
function City(){
   
   
	// 包含省份的函数，有条件可从后台获取
	var arr = ["上海",

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

墨码

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【使用JS 在selsect标签的指定位置添加选项option】

qq_45455554的博客

02-02

937

使用 JavaScript 在 select 元素的指定位置插入新的 option 选择可以通过以下步骤实现：1.首先，获取到需要插入 option 的 select 元素，可以通过元素的 id 或者其他方式获取到该元素的引用。例如，假设 select 元素的 id 为 “mySelect”，可以使用以下代码获取到该元素的引用：javascript2.创建一个新的 option 元素，并设置其属性和文本内容。3.使用 insertBefore() 方法将新的 option 元素插入到指定位置。

原生select默认文字提示

热门推荐

余光的博客

09-26

1万+

一、普通下拉列表 <select> <option value="Volvo">Volvo</option> <option value="1">栗子</option> <option value="2">香蕉</option> <option value="3">苹果</...

参与评论您还未登录，请先登录后发表或查看评论

如何实现自定义下拉组件，select下拉框样式自定义，带搜索的select下拉框

weixin_37347069的博客

08-03

3774

1.实现的效果 2.实现说明 3.完整代码一、实现的效果：二、实现说明： 1.由于无法修改原生select中的option样式，因此自己通过ul，li实现下拉列表，用input实现回显框； input实现select回显注意2个地方： 1）使用 readonly=“readonly” 让input框无法实现输入，不获取焦点； <input type="text" readonly="readonly" class="ec-input__value" placeholder="业务类型" .

原生select下拉框取值与清空数据

蓝胖子的博客

05-17

3672

原生select下拉框取值与清空数据

原生JS给SELECT添加OPTION选项

凯凯王的技术生涯

04-05

9267

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

629

无标题文档 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

5008

使用js给select标签添加数据（在数据库中查询出来的数据）：以获取供应商表为例 //使用jstl表达式获取到所有的供应商并使用foreach遍历 //js代码 var name="${provider.providername }"; //获取供应商名称 var providername="${requestScope.order.go

select框插入option原生JS

qq_43551196的博客

10-29

365

var select = document.getElementById('select'); var node = document.createElement("OPTION"); node.text = a[i]; select.appendChild(node);

下拉菜单11+原生js获取select下拉框的selected的option项

我的博客

08-13

4782

对于以下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

qq_30908729的博客

03-29

1463

原生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加颜色

qq_39822451的博客

08-28

2513

//js端拼接select下拉选，并且给指定option加颜色 //需要效果：点开下拉选时候，将指定的文字设置成红色 var optionStr = '<option value=""> </option>'; for (var i = 0; i < data.length; i++) { var value = data[i].id; var text; if (a==b) { text = "...

css 原生 select ＞ option 样式无法修改问题

最新发布

jiangjunyuan168的博客

01-10

3806

作者在维护老项目的过程中遇到一个修改原生 select 样式的需求，本以为只是一个简单的样式修改，但尝试过后，发现 select 下的 option 除了颜色样式可以修改，其他的样式怎么也修改不了。

jquery动态给下拉框select添加option

joan_yb的博客

12-09

4700

jquery动态给下拉框select添加option

js获取select标签选中的值，拼接option选项

weixin_44249754的博客

05-09

2053

if(data.length == 0) { //获取下拉框选中值的页面表示值 var useDepart = $('#useDepartmentsId option:selected').text(); //拼接option选项 var selectHtml = '<option value="">请选择</option>'; selectHtml += '<option value="' + useDepartmentsId + '">' + useDepa

原生js操作option

weixin_30556161的博客

08-21

198

1 <script type="text/javascript"> 2 // 1.动态创建select 3 function createSelect() { 4 var mySelect = document.createElement("select"); 5 mySelect....

select2动态填充数据（option普通版），初始赋值

hangGe0111的博客

12-29

3014

1.代码(普通版) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0

操作select option

02-22

558

1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); }2.添加选项

JS两种增加SELECT 下的option方法

van416521的专栏

11-09

8506

第一种方法: 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

6008

javascript中通过jquery向select选项框中添加新选项