JavaScript的一些下拉列表框用法
2024-05-10 13:29:20
效果展示
源码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>设置下拉列表框的列表项</title>
</head>
<body>
<div><select name="comboBox" id="comboBox"><option value="请选择">请选择</option></select>
</div>
<button type="button" onclick="testAddListItems()">设置下拉列表框</button>
<button type="button" onclick="testAddComboBox()">添加下拉列表项</button>
<button type="button" onclick="testClearListItems()">清空下拉列表框</button>
<button type="button" onclick="testGetListItem()">获取选中值</button>
<button type="button" onclick="testGetSelectedText()">获取所选中项的text</button>
<button type="button" onclick="testGetSelectedIndex()">获取所选中项的索引</button>
<button type="button" onclick="testGetListItemTexts();">获取所有列表项文本</button>
<button type="button" onclick="testGetListItemValues()">获取所有列表项值</button>
<button type="button" onclick="testRemoveById()">删除通过索引</button>
<button type="button" onclick="testRemoveByValue()">删除通过值</button>
<button type="button" onclick="testRemoveByText()">删除通过文本</button>
<button type="button" onclick="testListItemsCount()">计算列表框中选项数量</button>
<button type="button" onclick="testSetSelectedItemByIndex()">设置默认选项通过索引</button>
<button type="button" onclick="testSetSelectedItemByValue()">设置默认选项通过值</button>
<button type="button" onclick="testSetSelectedItemByText()">设置默认选项通过文本</button>
<button type="button" onclick="testIsExistItemByValue()">通过值判断是否存在</button>
<button type="button" onclick="testIsExistItemByText()">通过文本判断是否存在</button>
<button type="button" onclick="testReplaceTextByIndex()">替换选项text通过索引</button>
<button type="button" onclick="testReplaceValueByIndex()">替换选项value通过索引</button>
<button type="button" onclick="testReplaceValueByValue()">替换value通过value</button>
<button type="button" onclick="testReplaceValueByText()">替换value通过text</button>
<button type="button" onclick="testReplaceTextByText()">替换text通过text</button><script type="text/javascript">function testAddListItems() {var array = ["唐僧", "孙悟空", "猪八戒", "沙悟净"];setComboBox("comboBox", array);}function testAddComboBox() {addComboBox("comboBox", "牛魔王");}function testClearListItems() {clearComboBox("comboBox");}function testGetListItem() {alert(getSelectedValue("comboBox"));}function testGetSelectedText() {alert(getSelectedText("comboBox"))}function testGetSelectedIndex() {alert("索引：" + getSelectedIndex("comboBox"));}function testGetListItemTexts() {alert(getAllTexts("comboBox"));}function testGetListItemValues() {alert(getAllValues("comboBox"));}function testRemoveById() {removeByIndex("comboBox", 1);}function testRemoveByValue() {removeByValue("comboBox", "猪八戒");}function testRemoveByText() {removeByText("comboBox", "孙悟空");}function testListItemsCount() {alert(listItemsCount("comboBox"));}function testSetSelectedItemByIndex() {setSelectedItemByIndex("comboBox", 2);}function testSetSelectedItemByValue() {setSelectedItemByValue("comboBox", "沙悟净");}function testSetSelectedItemByText() {setSelectedItemByText("comboBox", "沙悟净");}function testIsExistItemByValue() {console.log("是否存在：" + isExistItemByValue("comboBox", "沙悟净"));}function testIsExistItemByText() {console.log("是否存在：" + isExistItemByText("comboBox", "孙悟空"));}function testReplaceTextByIndex() {replaceTextByIndex("comboBox", 2, "如来佛祖");}function testReplaceValueByIndex() {replaceValueByIndex("comboBox", 3, "观音菩萨");}function testReplaceValueByValue() {replaceValueByValue("comboBox", "请选择", "请选择...");}function testReplaceValueByText() {replaceValueByText("comboBox", "孙悟空", "swk");}function testReplaceTextByText() {replaceTextByText("comboBox", "孙悟空", "齐天大圣");}/*** 设置下拉列表框的值* @param selectId 下拉列表框的id* @param options 下拉列表项数组*/function setComboBox(selectId, options) {// 获取下拉列表框的元素var selectId = document.getElementById(selectId);for (var i = 0; i < options.length; i++) {// 创建一个option元素节点var option = document.createElement("option");// 为option元素节点创建一个文本节点var text = document.createTextNode(options[i]);// 将文本节点添加到option元素节点中option.appendChild(text);// 再将option节点添加到下拉列表框的元素节点中selectId.appendChild(option);}}/*** 添加下拉列表框选项* @param selectId 下拉列表框的id* @param option 下拉列表项*/function addComboBox(selectId, option) {// 获取下拉列表框的元素var selectId = document.getElementById(selectId);// 创建一个option元素节点var optionNode = document.createElement("option");// 为optionNode元素节点创建一个文本节点var textNode = document.createTextNode(option);// 将文本节点添加到optionNode元素节点中optionNode.appendChild(textNode);// 再将optionNode节点添加到下拉列表框的元素节点中selectId.appendChild(optionNode);}/*** 清空下拉列表框* @param selectId 下拉列表框的id*/function clearComboBox(selectId) {// 获取下拉列表框的元素var selectId = document.getElementById(selectId);while (tagNames.length > 0) {// 删除第一个子节点selectId.remove(selectId.childNodes[0]);}}/*** 获取下拉列表框所选中的值* @param selectId 下拉列表框的id* @returns {string} 返回所选中的值*/function getSelectedValue(selectId) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 返回选中的列表框的值return v.options[v.selectedIndex].value;}/*** 获取下拉列表框所选中的文本* @param selectId 下拉列表框的id* @returns {string} 返回所选中的文本*/function getSelectedText(selectId) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 返回选中的列表框的文本return v.options[v.selectedIndex].text;}/*** 获取下拉列表框所选中的索引* @param selectId 下拉列表框的id* @returns {number} 返回选中的索引*/function getSelectedIndex(selectId) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 返回所选中的列表项的索引return v.selectedIndex;}/*** 获取下拉列表框所有选项的文本* @param selectId 下拉列表框的id* @returns {any[]} 返回所有选项文本数组*/function getAllTexts(selectId) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 实例化一个数组var texts = new Array();// 循环遍历下拉列表框中的所有值for (var i = 0; i < v.options.length; i++) {// 将值赋给数组texts[i] = v.options[i].text;}// 返回下拉列表框的所有值数组return texts;}/*** 获取下拉列表框所有选项的值* @param selectId 下拉列表框的id* @returns {any[]} 返回所有选项值数组*/function getAllValues(selectId) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 实例化一个数组var values = new Array();// 循环遍历下拉列表框中的所有值for (var i = 0; i < v.options.length; i++) {// 将值赋给数组values[i] = v.options[i].value;}// 返回下拉列表框的所有值数组return values;}/*** 根据索引删除下拉列表框中的选项* @param selectId 下拉列表框的id* @param index 下拉列表框中的选项的索引*/function removeByIndex(selectId, index) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 根据索引删除下拉列表框中的选项v.removeChild(v.options[index]);}/*** 根据值删除下拉列表框中的选项* @param selectId 下拉列表框的id* @param value 下拉列表框中的选项的值*/function removeByValue(selectId, value) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {// 判断输入值与下拉列表框项的值释放相等if (v.options[i].value == value) {// 如果相等则删除该项v.options.remove(i);}}}/*** 根据文本删除下拉列表框中的选项* @param selectId 下拉列表框的id* @param text 下拉列表框中的选项的文本*/function removeByText(selectId, text) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {// 判断输入文本与下拉列表框项的文本释放相等if (v.options[i].text == text) {// 如果相等则删除该项v.options.remove(i);}}}/*** 获取下拉列表框中选项数量* @param selectId 下拉列表框的id* @returns {number} 返回下拉列表框中选项数量*/function listItemsCount(selectId) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 返回列表框中选项的数量return v.options.length;}/*** 通过索引设置默认选项* @param selectId 下拉列表框的id* @param index 默认选项索引*/function setSelectedItemByIndex(selectId, index) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (i == index) {v.options[i].selected = true;}}}/*** 通过值设置默认选项* @param selectId 下拉列表框的id* @param value 默认选项值*/function setSelectedItemByValue(selectId, value) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (v.options[i].value == value) {v.options[i].selected = true;}}}/*** 通过文本设置默认选项* @param selectId 下拉列表框的id* @param text 默认文本*/function setSelectedItemByText(selectId, text) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (v.options[i].text == text) {v.options[i].selected = true;}}}/*** 通过值判断选项是否存在下拉列表框中* @param selectId 下拉列表框的id* @param value 值* @returns {boolean} 如果存在则返回true，否则返回false*/function isExistItemByValue(selectId, value) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (v.options[i].value == value) {return true;}}return false;}/*** 通过文本判断选项是否存在下拉列表框中* @param selectId 下拉列表框的id* @param text 文本* @returns {boolean} 如果存在则返回true，否则返回false*/function isExistItemByText(selectId, text) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (v.options[i].text == text) {return true;}}return false;}/*** 通过索引替换下拉列表框中的选项text* @param selectId 下拉列表框的id* @param index 下拉列表框选项索引* @param newText 修改后的新text*/function replaceTextByIndex(selectId, index, newText) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (i == index) {v.options[i].text = newText;}}}/*** 通过索引替换拉列表框中的选项value* @param selectId 下拉列表框的id* @param index 下拉列表框选项索引* @param newValue 修改后的新value*/function replaceValueByIndex(selectId, index, newValue) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (i == index) {v.options[i].value = newValue;}}}/*** 通过value来替换下拉列表框中的value* @param selectId 下拉列表框的id* @param oldValue 原来的value* @param newValue 修改后的新value*/function replaceValueByValue(selectId, oldValue, newValue) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (v.options[i].value == oldValue) {v.options[i].value = newValue;}}}/*** 通过text替换value* @param selectId 下拉列表框的id* @param oldText 原来的text* @param newValue 修改后的新value*/function replaceValueByText(selectId, oldText, newValue) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (v.options[i].text == oldText) {v.options[i].value = newValue;}}}/*** 通过text替换原来的text* @param selectId 下拉列表框的id* @param oldText 原来的text* @param newText 修改后的新text*/function replaceTextByText(selectId, oldText, newText) {// 获取下拉列表框的元素var v = document.getElementById(selectId);// 循环遍历下拉列表框项for (var i = 0; i < v.options.length; i++) {if (v.options[i].text == oldText) {v.options[i].text = newText;}}}
</script>
</body>
</html>
JavaScript的一些下拉列表框用法相关推荐
- javascript 中 console 的用法
javascript 中 console 的用法 视频 https://www.bilibili.com/video/BV1g7411L751?from=search&seid=1567656 ...
- JavaScript中window.open用法实例详解
本文较为详细的分析了JavaScript中window.open用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <script LANGUAGE="javascript& ...
- javascript 中this 的用法:
javascript 中this 的用法: 1.<div οnclick="// 可以在里面使用this">division element</div> t ...
- 关于JavaScript中typeof的用法
一.typeof的作用 在JavaScript中,变量未经声明就使用,系统是会报错的.但是,typeof却是js中有且仅有的一个特例. typeof的作用就是用来区分数据类型的,下面先说说typeof ...
- javascript中call的用法总结
javascript中call的用法总结 1.使用call方法调用函数并且指定上下文的'this' function greet(){console.log(this.name+",age= ...
- javascript 中innerHTML的用法
javascript 中innerHTML的用法 语法 Object.innerHTML = "HTML";//设置其内容 var html = Object.innerHTML; ...
- HTML控制台输出console,Javascript的console.log()用法
把下面代码保存为html文件,然后IE8---F12---脚本---控制台里就会出现有趣的东西,如果是Firefox,安装了FireBug后,则F12--控件台--所有 ,同样可以看到. javasc ...
- javascript操作select下拉列表框的一点小经验
今天客户对项目提出新需求,要求商品品牌不但能选择,还要能够录入,而且录入的品牌名称必须是下拉列表框里面的相(由于商品品牌太多,不好选择,所以有此要求:在此将我的处理方法记录一下). 按照我一贯的web ...
- javaScript call 函数的用法说明
javaScript 中的 call() 是一个奇妙的方法,但也是一个让人迷惑的方法,先看一下官方的解释. call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一 ...
最新文章
- leetcode--在排序数组中查找元素的第一个和最后一个位置--python
- Scrum介绍——续
- react-native 签名
- 50兆 svg 文件超过_中山兆驰产业园项目开工，预计竣工投产时间为…
- Kibana查询说明
- cover letter 和response letter的写法
- [Unity] 在 3DsMax 中将骨骼调整为适应 Unity 的 Humanoid 的结构的记录
- html 下拉列表返回值,jquery 根据后台返回值来选中下拉框 option 值
- 用Python做入门OJ题
- 如果你热爱编码，就应该少写代码
- 2018年 - 年终总结
- ctf解密图片得到flag_图片隐藏flag怎么找
- 卡西欧科学计算机使用方法,卡西欧计算器使用说明
- 研究区分onbeforeunload事件是刷新还是关闭
- 2021春招Java面试题大全（精华六）
- 平台业务收款分账产品设计 - 支付计费分账
- pandas读写表格
- C++数组练习题（一）
- 微信小程序--亲戚称呼计算
- Java中的静态方法为什么不能调用非静态方法