html下拉框怎么用js添加新值
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html下拉框怎么用js添加新值相关的知识,希望对你有一定的参考价值。
html下拉框怎么用js添加新值javascript添加一个下拉列表项的方法:创建一个新的option节点,然后添加到目标select对象中去,关键代码如下:
1、var objSelect = document.getElementById(select_id)。
2、var new_opt = new Option(objItemText, objItemValue)。
3、objSelect.options.add(new_opt)。
实例演示如下:
1、HTML结构,包括一个select项,含有三个options。另外,设置input和button,通过自由父子,实现给select增加自定义option。
此时的显示效果如下,其中option中有三项。
2、JS的函数设计如下:
现有的options如下:
3、在页面上输入新的数据,点击添加。
此时的select效果显示如下,自由添加功能实现。 参考技术A html 下拉框动态添加数据,利用js给datalist或select动态添加option选项的方法 转载
2021-06-03 17:53:35
依然有光
码龄5年
关注
有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项,下面针对此类情况做了一个实例
内容如下:
鼠标点击时加载
选择城市:
//需要添加的数据内容,可以通过ajax请求获取
var cities = [
label:"xian",value:"西安",
label:"hubei",value:"湖北",
label:"wuhai",value:"武汉"
];
//获取datalist的dom
var ss = document.getElementById("cities");
//定义加载城市的函数
function loadcities()
for(var i = 0;i < cities.length; i ++)
var city = cities[i];
//纯js实现的方式
/*var op=document.createElement("option");
op.setAttribute("label",city.label);
op.setAttribute("value",city.value);
ss.appendChild(op);*/
//jquery实现的方式
$("#cities").append('');
//页面加载完时加载此函数
window.onload = function()
loadcities();
以上这篇利用js给datalist或select动态添加option选项的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。 参考技术B 1.
首先,打开html编辑器,新建html文件,例如:index.html,填充问题基础代码。
2.
在index.html中的<script>标签,输入js代码:$('#txt').val('添加值');$('#txt').attr('data','test');。
3.
浏览器运行index.html页面,此时input元素成功被添加了值和属性。
以上是关于html下拉框怎么用js添加新值的主要内容,如果未能解决你的问题,请参考以下文章